Javascript 如何从特定列表中删除选中项的列表

我这里有两个

ul

列表，其中包含两个项目列表和两个删除按钮。我在这里只为两个删除按钮使用一个按钮单击功能，我希望有这样的功能：当用户检查列表1中的项目时，无论是否选中列表2中的项目，按下删除按钮后，只有列表1中的项目将被删除，反之亦然。因为现在我可以使用列表1中的删除按钮删除列表2中的项目。我在互联网上读到的是，按下“删除”按钮后，我可能会使用一些调用：

$（event.currentTarget）.parent（）

来获取属于此按钮的确切内容列表，然后在此列表中进行处理。我说得对吗

$（文档）.ready（函数（）{
$（“#删除”）。单击（函数（）{
var deleteItem=[]；
$（“输入：复选框”）。每个（函数（）{
var$this=$（this）；
如果（$this.is（“：checked”））{
deleteItem.push（$this.attr（“name”））；
}
});
如果（deleteItem！=[]）{
if（deleteItem.indexOf（“cbox1”）>-1&&deleteItem.indexOf（“cbox2”）>-1）{
$（“#box1”）.remove（）；
$（“#box2”）.remove（）；
}
}
});
});

列表1



删除

列表2



删除

注意：Id必须是唯一的。如果您倾向于使用相同的Id，请将其转换为类

工作演示


$（文档）.ready（函数（）{
$（“.delete”）。单击（函数（）{
var deleteItem=[]；
$（“输入：复选框”）。每个（函数（）{
var$this=$（this）；
如果（$this.is（“：checked”））{
$（this.parent（）.parent（）.remove（））
}
});
});
});

列表1






删除

列表2






删除
是的，您使用.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 retrieved
       if ($(this).children('input:checkbox').is(':checked')) // if the input is checked
           $(this).remove(); // we remove it
   });
    
});

希望有帮助！：）

编辑：

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

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

正如其他人所说，您应该使用类而不是id。根据定义，id应该被视为html中唯一的块标识符。在您的例子中，您有两个按钮，因此最好这样做：
正如我在评论中提到的，您应该使用类而不是id，因为id必须是唯一的


JQUERY:

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

<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”的元素时，它会找到父ul，然后查找选中的输入。一旦找到这些输入，它将查找这些输入的最近li并删除它们

HTML:

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

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

我添加了一个迭代器，它将遍历
items
中的对象，并将name属性输出到控制台（在大多数浏览器中为F12）。下面是一个。
具有相同id的多个HTML元素是无效的。例如，您有两个带有
id=“delete”
的按钮，这是无效的。Id应该是唯一的。您可以指定唯一id或使用类。检查我的答案，如果您需要任何更改，请在我的答案下方添加注释。谢谢devlin，我可以问一下，在拥有包含已检查输入列表的items变量后，如何获取这些输入的id/名称。我使用：items.each（函数（I）{deleteItem.push（I.attr（“name”）；}），但它不工作。谢谢