How to Remove Element from Lists with Specific ID

Question

I have two lists and I'd like to remove all li tags except for those li tags that contain input elements with -all as its id. Is this something I can achieve using selectors in jQuery? Possibly using not selector?

This is what I currently have: $("#search-filter-column ul li").remove();

<ul>
   <li>
       <input id="filter-types-all" name="filter-types-all" type="checkbox" checked="checked">
   </li>
   <li>
       <input id="filter-types-suv" name="filter-types-suv" type="checkbox" checked="checked">
   </li>
   <li>
       <input id="filter-types-special" name="filter-types-special" type="checkbox" checked="checked">
   </li>
</ul>


<ul>
   <li>
       <input id="filter-company-all" name="filter-company-all" type="checkbox" checked="checked">
   </li>
   <li>
       <input id="filter-company-1" name="filter-company-1" type="checkbox" checked="checked">
   </li>
   <li>
       <input id="filter-company-2" name="filter-company-2" type="checkbox" checked="checked">
   </li>
</ul>


<ul>
   <li>
       <input id="filter-location-1" name="filter-location-1" type="checkbox" checked="checked">
   </li>
   <li>
       <input id="filter-location-2" name="filter-location-2" type="checkbox" checked="checked">
   </li>
   <li>
       <input id="filter-location-3" name="filter-location-3" type="checkbox" checked="checked">
   </li>
</ul>

Answer 1

Instead of searching for <li> elements and then testing their content, you can test for input elements that are inside of li elements and then use the :not() CSS pseudo-class and the "ends-with" attribute selector ($=) along with the "starts-with" (^=) attribute selector to exclude any irrelevant input elements. Then, you can remove the parent li of any matching elements with the Jquery .parent() method.

// Remove all input elements that are descendants of an <li> that don't have
// an id that ends with ($=) "all" or an id that starts with "filter-location-".
$("#search-filter-column ul > li input:not([id$='-all']):not([id^='filter-location-'])").parent().remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search-filter-column">
<ul>
   <li>
     <input id="filter-types-all" name="filter-types-all" type="checkbox" checked="checked">
   </li>
   <li>
     <input id="filter-types-suv" name="filter-types-suv" type="checkbox" checked="checked">
   </li>
   <li>
     <input id="filter-types-special" name="filter-types-special" type="checkbox" checked="checked">
   </li>
</ul>
<ul>
   <li>
     <input id="filter-company-all" name="filter-company-all" type="checkbox" checked="checked">
   </li>
   <li>
     <input id="filter-company-1" name="filter-company-1" type="checkbox" checked="checked">
   </li>
   <li>
     <input id="filter-company-2" name="filter-company-2" type="checkbox" checked="checked">
   </li>
</ul>
<ul>
   <li>
     <input id="filter-location-1" name="filter-location-1" type="checkbox" checked="checked">
   </li>
   <li>
     <input id="filter-location-2" name="filter-location-2" type="checkbox" checked="checked">
   </li>
   <li>
     <input id="filter-location-3" name="filter-location-3" type="checkbox" checked="checked">
   </li>
</ul>
</div>

Answer 2

Yes, you can use :not, :has, and an attribute-ends-with selector:

$("#search-filter-column ul li:not(:has(input[id$=-all]))").remove();

That matches li elements in a ul in #search-filter_column that don't contain an input whose id ends with -all.

In a comment elsewhere you've said

I also have li elements that contain -location-. I don't want to remove these li elements either.

You can have multiple :not conditions, li:not(this):not(that). They AND together like other aspects of CSS selectors. So you'd do that like this with an attribute contains selector (*=):

$("#search-filter-column ul li:not(:has(input[id$=-all])):not(:has(input[id*=-location-]))").remove();

Live Example:

$("#search-filter-column ul li:not(:has(input[id$=-all])):not(:has(input[id*=-location-]))").remove();

<div id="search-filter-column">
  Types:
  <ul>
     <li>
         <input id="filter-types-all" name="filter-types-all" type="checkbox" checked="checked">
     </li>
     <li>
         <input id="filter-types-suv" name="filter-types-all" type="checkbox" checked="checked">
     </li>
     <li>
         <input id="filter-types-special" name="filter-types-all" type="checkbox" checked="checked">
     </li>
  </ul>

  Companies:
  <ul>
     <li>
         <input id="filter-company-all" name="filter-company-all" type="checkbox" checked="checked">
     </li>
     <li>
         <input id="filter-company-1" name="filter-company-all" type="checkbox" checked="checked">
     </li>
     <li>
         <input id="filter-company-2" name="filter-company-all" type="checkbox" checked="checked">
     </li>
  </ul>
  
  Locations:
  <ul>
     <li>
         <input id="filter-location-1" name="filter-location-1" type="checkbox" checked="checked">
     </li>
     <li>
         <input id="filter-location-2" name="filter-location-2" type="checkbox" checked="checked">
     </li>
     <li>
         <input id="filter-location-3" name="filter-location-3" type="checkbox" checked="checked">
     </li>
  </ul>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>