Can javascript hide list items with specific text in wordpress?

alexnusinov
May 14, 2023
150 views
1 vote
2 Answers

I’m trying to hide subcategories in a search drop-down menu in wordpress by specific text using javascript. so far without luck. I’m no programer so i’ll appreciate your help with directions or fix to the script.
The menu html looks somewhat like this when i inspect the page(i’ve narrowed it down):

<ul>
<li>
<select class="default-select select2-hidden-accessible" name="categories" tabindex="-1" aria-hidden="true">
<option value=""> choose category </option>
<option value="119">Customer Support</option>
<option value="163">Hosting</option>
<option value="181"> - Link Building</option>
</li>
</ul>

When I inspect the options i get this:

    <span class="select2-results">
    <ul class="select2-results__options" role="tree" id="select2-categories-85-results" aria-expanded="true" aria-hidden="false">
    <li class="select2-results__option" role="treeitem" aria-selected="false"> choose category </li>
    <li class="select2-results__option" id="select2-categories-85-result-5nsl-119" role="treeitem" aria-selected="false">Customer Support</li>
    <li class="select2-results__option" id="select2-categories-85-result-td3l-163" role="treeitem" aria-selected="false">Hosting</li>
    <li class="select2-results__option" id="select2-categories-85-result-c6bv-181" role="treeitem" aria-selected="false"> - Link Building</li>
    </ul></span>

I’m trying to hide every li that contain the character "-" or "–".
so after a lot of searching i found this javascript:

let lis = document.getElementsByTagName('li');

for (let x = 0; x < lis.length; x++) {
    let li = lis[x];
    let content = li.textContent;
  
    if (content.indexOf('-') !== -1 || content.indexOf('--') !== -1) {
    li.style.display = 'none';
  }
}

The problem with this is when i use it the category menu disappears completely, and the category menu html code looks like this:

<ul>
<li style="display: none;">
<select class="default-select select2-hidden-accessible" name="categories" tabindex="-1" aria-hidden="true">
<option value=""> choose category </option>
<option value="119">Customer Support</option>
<option value="163">Hosting</option>
<option value="181"> - Link Building</option>
</li>
</ul>

I’ve tried using "getElementsByClassName(‘select2-results__option’)" but it does absolutely nothing, like the menu and its content is not affected.
how can i fix this? Appreciate your help.

EDIT:
HTML PHP snippet of search section if it helps:

<ul>
<li>
<div class="form-group">
<input type="text" placeholder="<?php echo __( 'What are you looking for?', 'exertio_theme' ); ?>" class="form-control" name="title" value="<?php echo esc_attr($title_value); ?>">
</div>
</li>
<li>
<select class="default-select" name="categories">
<option value=""> <?php echo __( 'Select Category', 'exertio_theme' ); ?> </option>
<?php echo get_hierarchical_terms('service-categories','', $cat_value ); ?>
</select>
</li>
<li> <button type="submit" class="btn btn-style btn-block"><?php echo __( 'Search', 'exertio_theme' ); ?></button> </li>
</ul>

in addition, when i use the following css to hide specific li in the drop-down menu it works (if that helps):

.select2-results__options > li:nth-child(2) { display: none; }

Answers

Chosen as BEST ANSWER

managed to solve the problem, Thanks to @ikhvjs for providing scripts and helping i learned alot. i'll share solution if anyone is interested.

wordpress javascript file name: select2.full.min.js

The javascript that generated category items dynamically to the page is the following:

    i.prototype.option=function(e){
    var t=document.createElement("li");
    t.className="select2-results__option";
    var n={role:"option","aria-selected":"false"},i=window.Element.prototype.matches||window.Element.prototype.msMatchesSelector||window.Element.prototype.webkitMatchesSelector;
    for(var r in(null!=e.element&&i.call(e.element,":disabled")||null==e.element&&e.disabled)&&(delete n["aria-selected"],n["aria-disabled"]="true"),null==e.id&&delete n["aria-selected"],null!=e._resultId&&(t.id=e._resultId),e.title&&(t.title=e.title),e.children&&(n.role="group",n["aria-label"]=e.text,delete n["aria-selected"]),n){
    var o=n[r];
    t.setAttribute(r,o)
    }
    if(e.children){
    var s=h(t),a=document.createElement("strong");
    a.className="select2-results__group";
    h(a);
    this.template(e,a);
    for(var l=[],c=0;c<e.children.length;c++){
    var u=e.children[c],d=this.option(u);
    l.push(d)
    }
    var p=h("<ul></ul>",{class:"select2-results__options select2-results__options--nested"});
    p.append(l),s.append(a),s.append(p)
    }
    else this.template(e,t);
    return f.StoreData(t,"data",e),t
    }

i simply added the following variable and if condition after the first variable declaration in the function:

var content=e.text;if(window.location.href.indexOf("/services-search/")!=-1&&(content.indexOf("-")!==-1||content.indexOf("--")!==-1)){t.style.display="none";}

now when i'm in the "/services-search/" page the sub categories that include "-" or "--" do not display.

(Edit)

Your HTML has some syntax errors. You miss a </select> and I fixed this.
As you have different html source and I am not sure which one you are using.
I just take the first html source.

I updated your js files and the example below:

const options = document.querySelectorAll("option");

for (let i = 0; i < options.length; i++) {
  const content = options[i].textContent;
  if (content.indexOf("-") !== -1 || content.indexOf("--") !== -1) {
    options[i].style.display = "none";
  }
}

document
  .querySelector("select[name='categories']")
  .addEventListener("change", function () {
    const lis = document.querySelectorAll("span.select2-results li");

    for (let i = 0; i < lis.length; i++) {
      const content = lis[i].textContent;
      if (content.indexOf("-") !== -1 || content.indexOf("--") !== -1) {
        lis[i].style.display = "none";
      }
    }
  });

<div>
  <ul>
    <li>
      <select
        class="default-select select2-hidden-accessible"
        name="categories"
        tabindex="-1"
        aria-hidden="true"
      >
        <option value="">choose category</option>
        <option value="119">Customer Support</option>
        <option value="163">Hosting</option>
        <option value="181">- Link Building</option>
      </select>
    </li>
  </ul>
</div>
<div>
  <span class="select2-results">
    <ul
      class="select2-results__options"
      role="tree"
      id="select2-categories-85-results"
      aria-expanded="true"
      aria-hidden="false"
    >
      <li class="select2-results__option" role="treeitem" aria-selected="false">
        choose category
      </li>
      <li
        class="select2-results__option"
        id="select2-categories-85-result-5nsl-119"
        role="treeitem"
        aria-selected="false"
      >
        Customer Support
      </li>
      <li
        class="select2-results__option"
        id="select2-categories-85-result-td3l-163"
        role="treeitem"
        aria-selected="false"
      >
        Hosting
      </li>
      <li
        class="select2-results__option"
        id="select2-categories-85-result-c6bv-181"
        role="treeitem"
        aria-selected="false"
      >
        - Link Building
      </li>
    </ul></span
  >
</div>

Please signup or login to give your own answer.

Click here to cancel reply.