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，因为id必须是唯一的。

Here is a Fiddle Demo.

<强> JQUERY：

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

如果某个元素具有＆＃39;删除＆＃39;单击，它找到父ul，然后查找已检查的输入。找到这些后，它会查找这些输入最接近的li并将其删除。

<强> 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询问如何查找已检查输入的名称。这是一种方法：

$('.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中的对象，并将name属性输出到控制台（大多数浏览器中为F12）。这是一个updated Fiddle Demo。

Answer 2

注意：Id必须是唯一的。如果您打算使用相同的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
   });

});

希望它有所帮助！：）

编辑：

正如其他人所说，你应该使用一个类而不是一个id。根据定义，id应被视为html中的唯一块标识符。在你的情况下，你有2个按钮，所以最好这样做：<button class="delete"></button>

如何从特定列表中删除已检查项目的列表

3 个答案: