Как удалить элемент из списков с определенным идентификатором

У меня есть два списка, и я хотел бы удалить все теги li, кроме тегов 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>

javascript jquery html

01.05.2018 17:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 4

Да, вы можете использовать :not, :has и селектор атрибут-заканчивается-с:

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

Это соответствует элементам li в ul в #search-filter_column, которые не содержат input, чей id заканчивается на -all.

В комментарии в другом месте вы сказали

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

У вас может быть несколько состояний :not, li:not(this):not(that). Они И вместе, как и другие аспекты селекторов CSS. Таким образом, вы бы сделали это с помощью атрибут содержит селектор (*=):

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

Живой пример:

$("#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>

Спасибо! Что означает $ =?

— 01.05.2018 17:53

@Michael: Это селектор конца атрибута. Подробнее по ссылке выше. :-)

— 01.05.2018 17:54

01.05.2018 17:51

Вместо поиска элементов <li> и последующего тестирования их содержимого вы можете проверить элементы input, которые находятся внутри элементов li, а затем использовать :not() CSS псевдокласс и селектор атрибутов "заканчивается на" ($=) вместе с селектор атрибута "начинается с" (^=) для исключения любых нерелевантных элементов 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>

Спасибо! Что означает $ =?

— 01.05.2018 17:54

@Michael См. Мой обновленный ответ. Это означает «заканчивается на», потому что вы хотите, чтобы элементы ввода, которые называются «id», заканчивались на -all.

— 01.05.2018 17:55

Быстрый вопрос: только что столкнулся с проблемой, lol, что, если бы я хотел удалить все элементы li, у которых нет filter-location- AND -all в качестве идентификатора? Можно ли добавить к селектору ИЛИ?

— 01.05.2018 18:15

@Michael Можете уточнить. id должен быть чем? Я не вижу никаких элементов в вашем примере с id, который содержит filter-location.

— 01.05.2018 18:20

У меня также есть элементы li, содержащие -location-. Я тоже не хочу удалять эти элементы li. Прямо сейчас при использовании вышеупомянутого он удаляет эти элементы.

— 01.05.2018 18:23

@Michael: У вас может быть несколько состояний :not, li:not(this):not(that). Они И вместе, как и другие аспекты селекторов CSS.

— 01.05.2018 18:24

Я обновил сообщение новым списком, содержащим -location-

— 01.05.2018 18:25

@Michael Мне пришлось уйти, но я обновил ответ, чтобы решить эту проблему. Вы просто объединяете несколько селекторов псевдокласса CSS :not() вместе, чтобы создать больше условий. В вашем новейшем случае вы должны использовать селектор атрибута "содержит" (*=).

— 01.05.2018 19:40

01.05.2018 17:52

Для этого вы можете использовать функцию jQuery filter, чтобы отфильтровать элементы, которые вы не хотите удалять:

$("#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>

В вашем примере я изменил несколько фильтров, чтобы в идентификаторе не было -all, чтобы показать, что он фактически их удалит.

01.05.2018 17:57

Вы пытаетесь выбрать по ID, получить родителя и удалить родителя. Бывший: