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> 

Answer 3

You can use jQuery's filter function for this in order to filter out the elements you do not want to remove:

 $("#search-filter-column ul li").filter(function() { return $(this).find('input[id$=-all]').length; }).remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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-all" type="checkbox" checked="checked"> </li> <li> <input id="filter-types-special" name="filter-types-all" 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-all" type="checkbox" checked="checked"> </li> <li> <input id="filter-company-2" name="filter" type="checkbox" checked="checked"> </li> </ul> </div> 

In your example, I changed a few filters to not have -all in the id, to show that it will, in fact, remove those.

Answer 4

You try to select by ID, get parent and remove parent. Ex:

$('#ID_REMOVE').parent().remove()