如何从具有特定ID的列表中删除元素

Question

我有两个列表,我想删除所有li除了包含与输入元素的李标签标记-all为id.这是我在jQuery中使用选择器可以实现的吗？可能不使用选择器？

这就是我目前拥有的: $("#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

<li>您可以测试input元素内部的li元素,然后使用:not()CSS伪类和"ends-with"属性selector($=)以及"starts-with"(^=),而不是搜索元素然后测试它们的内容.属性选择器以排除任何不相关的input元素.然后,您可以li使用Jquery.parent()方法删除任何匹配元素的父级.

// 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>