Как удалить список отмеченного элемента из определенного списка

Question

У меня есть 2 ul Список, содержащий два списка элементов и 2 кнопки удаления. Я использую здесь только одну функцию нажатия кнопки для обеих кнопок удаления, и я хотел бы иметь что-то вроде: когда пользователь проверяет элементы в списке 1, тогда только элементы в списке 1 будут удалены после нажатия кнопки удаления без каких-либо элементов в списке 2, или нет, и наоборот. Поскольку теперь я могу использовать кнопку удаления в списке 1 для удаления элементов в списке 2. То, что я прочитал в Интернете, после нажатия кнопки удаления, я могу использовать что-то: $(event.currentTarget).parent(), чтобы получить точный список контента, принадлежит этой кнопке, а затем процесс внутри этого списка. Я прав?

$(document).ready(function() { 
 
    $("#delete").click(function() { 
 
     var deleteItem = []; 
 
     $("input:checkbox").each(function() { 
 
      var $this = $(this); 
 

 
      if ($this.is(":checked")) { 
 
       deleteItem.push($this.attr("name")); 
 
      } 
 
     }); 
 
     if (deleteItem != []) { 
 
      if (deleteItem.indexOf("cbox1") > -1 && deleteItem.indexOf("cbox2") > -1) { 
 
       $("#box1").remove(); 
 
       $("#box2").remove(); 
 
      } 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul>List 1 
 
    <li id="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span></li> 
 
    <li id="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span></li> 
 
    <li id="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span></li> 
 
    <button id="delete">Delete</button> 
 
</ul> 
 

 

 
<ul>List 2 
 
    <li id="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span></li> 
 
    <li id="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span></li> 
 
    <li id="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span></li> 
 
    <button id="delete">Delete</button> 
 
</ul>

Answer 1

Как я упоминал в своем комментарии, вы должны использовать класс вместо id, потому что идентификатор должен быть уникальным.

Here is a Fiddle Demo.

Jquery:

$('.delete').click(function() { 
    var items = $(this).parent('ul').find('input:checked'); 
    items.closest('li').remove(); 
}); 

Когда элемент с классом 'удалить' щелкает, он находит родительские ул, а затем ищет проверяемые входы. Как только они будут найдены, он ищет ближайший ли для этих входов и удаляет их.

HTML:

<ul>List 1 
    <li class="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span></li> 
    <li class="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span></li> 
    <li class="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span></li> 
    <button class="delete">Delete</button> 
</ul> 


<ul>List 2 
    <li class="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span></li> 
    <li class="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span></li> 
    <li class="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span></li> 
    <button class="delete">Delete</button> 
</ul> 

---

ОП спросил, как найти имя проверяемых входов. Вот один из способов сделать это:

$('.delete').click(function() { 
    var items = $(this).parent('ul').find('input:checked'); 
    //iterate over objects and log the name 
    $.each(items, function(index, value) { 
    console.log($(this).attr('name')); 
    }); 
    items.closest('li').remove(); 
}); 

Я добавил итератор, который будет проходить через объекты в items и выводить имя атрибута консоли (F12 в большинстве браузеров). Вот updated Fiddle Demo.

Answer 2

Примечание: Id должен быть уникальным. Если вы стремящиеся использовать тот же идентификатор, что преобразования в класс

рабочего примеру

$(document).ready(function() { 
 

 
    $(".delete").click(function() { 
 
    var deleteItem = []; 
 
    $("input:checkbox").each(function() { 
 
     var $this = $(this); 
 
     if ($this.is(":checked")) { 
 
     $(this).parent().parent().remove() 
 
     } 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul>List 1 
 
    <li id="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span> 
 
    </li> 
 
    <li id="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span> 
 
    </li> 
 
    <li id="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span> 
 
    </li> 
 
    <button class="delete">Delete</button> 
 
</ul> 
 

 

 
<ul>List 2 
 
    <li id="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span> 
 
    </li> 
 
    <li id="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span> 
 
    </li> 
 
    <li id="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span> 
 
    </li> 
 
    <button class="delete">Delete</button> 
 
</ul>

Answer 3

Да вы правы в использовании .parent) метод Jquery (, Если я понимаю, что вы делаете, вы можете улучшить свой код таким образом:

$(document).ready(function() { 

    $("#delete").click(function() { 

    var parentUl = $(this).parent(); // get the parent url of the clicked button 
    var li_items = parentUl.find('li'); // get the li in the parent ul 

    li_items.each(function() { // for each li retrevied 
     if ($(this).children('input:checkbox').is(':checked')) // if the input is checked 
      $(this).remove(); // we remove it 
    }); 

}); 

Надеюсь, это поможет! :)

EDIT:

Как другой говорит, вы должны использовать класс вместо идентификатора. по определению идентификатор должен рассматриваться как уникальный идентификатор блока в вашем html. в вашем случае у вас есть 2 кнопки, поэтому лучше сделать это: <button class="delete"></button>