How to delete list of checked item from a specific list

Question

I have here 2 ul list which contains inside two lists of items and 2 delete buttons. I use here only one button click function for both delete buttons and I would like to have something like: when the user checks the items in the List 1 then only the items in the List 1 will be deleted after pressing the delete button no matter items in List 2 are checked or not and vice versa. Because now I can use the delete button in List 1 to delete items in List 2. What I have read on the internet is after pressing the delete button I might use something call: $(event.currentTarget).parent() to get the exact content list belongs to this button and then process inside of this list. Am I right?

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

As I mentioned in my comment, you should use a class instead of id's because id's must be unique.

Here is a Fiddle Demo.

JQUERY:

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

When an element with the class 'delete' is clicked, it finds the parent ul and then looks for checked inputs. Once those are found, it looks for the closest li for those inputs and removes them.

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>

---

OP asked how to find the name of the checked inputs. Here is one way to do it:

$('.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();
});

I've added an iterator which will go through the objects in items and output the name attribute to the console (F12 in most browsers). Here is an updated Fiddle Demo .

Answer 2

Note :Id must be unique. If you are tending to use same Id convert that to a class

Working Demo

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

Yeah you are right in the use of .parent() jquery method. If i understand what you trie to do, you can maybe improve your code in this way :

$(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 retrieved
       if ($(this).children('input:checkbox').is(':checked')) // if the input is checked
           $(this).remove(); // we remove it
   });
    
});

Hope it helps ! :)

EDIT :

As other says, you should use a class instead of an id. per definition, an id should be considers as an unique block identifier in your html. in your case, you have 2 buttons so it's better to do this : <button class="delete"></button>