Question

我有6个div，每个都有一个复选框。当我单击删除按钮时，应删除带有复选复选框的div。然而，删除工作以一种不可预测的方式。这是我的jsfiddle。 http://jsfiddle.net/mftckzaL/。请帮忙！

  <div class="0" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border- 
  radius:5px;padding:5px 10px;">
  <input type="checkbox" value="res1" name="resolution">
  </div>
  <div class="1" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border- 
  radius:5px;padding:5px 10px;">
  <input type="checkbox" value="res1" name="resolution">
  </div>
  <div class="2" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-
  radius:5px;padding:5px 10px;">
  <input type="checkbox" value="res1" name="resolution">
  </div>
  <div class="3" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-   
  radius:5px;padding:5px 10px;">
  <input type="checkbox" value="res1" name="resolution">
  </div>
  <div class="4" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-   
  radius:5px;padding:5px 10px;">
  <input type="checkbox" value="res1" name="resolution">
  </div>
  <div class="5" id="res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-  
  radius:5px;padding:5px 10px;">
  <input type="checkbox" value="res1" name="resolution">
  </div>
  <input type="button" value="Delete Selection" name="delete_banner_art" id="delete_banner_art" 
  class="delete_banner_art">

我的JavaScript：

$("#delete_banner_art").click(function () {
checkboxes = document.getElementsByName('resolution');
for (var i = (checkboxes.length - 1); i >= 0; i--) {
    if (checkboxes[i].checked == true) {
        $("." + i).remove();
    }
}
});

Answer 1

如果您正在使用jQuery，使用jQuery ，并使用其选择器，而不是混合和匹配（严重）。为了简化您的代码（无效的HTML），我建议：

$("#delete_banner_art").click(function () {
    // we find the inputs of type="checkbox", that are checked:
    $('input[type="checkbox"]:checked')
    // find the closest ancestor 'div' element:
    .closest('div')
    // and remove those div elements:
    .remove();
});

JS Fiddle demo

参考文献：

Answer 2

这里

for (var i = (checkboxes.length - 1); i >= 0; i--) {
    if (checkboxes[i].checked == true) {
        $("." + i).remove();
    }
}

删除div时，不会更改其他类的类，但增量会更新为当前的复选框数。

您可以从最终开始将它们全部删除，但如果您在列表中删除一个，它似乎无法预测

Answer 3

ID应该是唯一的，for循环也应该转到i > 0而不是i >= 0

http://jsfiddle.net/mftckzaL/2/

for (var i = (checkboxes.length - 1); i > 0; i--) {
    if (checkboxes[i].checked == true) {
        $("." + i).remove();
    }
}

这是删除所选项目的更好方法

http://jsfiddle.net/mftckzaL/5/

$("#delete_banner_art").click(function () {
    $('input[type="checkbox"]:checked').parents('div').remove();
});

Answer 4

纯JS

（不再是）

// this does not have to be resolved every time you click
var checkboxes = document.getElementsByName('resolution');

document.getElementById("delete_banner_art").onclick =function () {
    for (var i=0, l=checkboxes.length; i<l; i++) {
        // "condition" is equivalent to "condition == true"
        if (checkboxes[i].checked) { checkboxes[i].parentNode.remove(); }
    }
};

JS Fiddle Demo

Answer 5

在这里查看修复的JSFiddle： http://jsfiddle.net/mftckzaL/9/

HTML：

<div class="0 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
    <input type="checkbox" value="res1" name="resolution" />
</div>
<div class="1 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
    <input type="checkbox" value="res1" name="resolution" />
</div>
<div class="2 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
    <input type="checkbox" value="res1" name="resolution" />
</div>
<div class="3 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
    <input type="checkbox" value="res1" name="resolution">
</div>
<div class="4 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
    <input type="checkbox" value="res1" name="resolution">
</div>
<div class="5 res1" style="border:1.5px solid #a1a1a1;width:900px;height:127;border-radius:5px;padding:5px 10px;">
    <input type="checkbox" value="res1" name="resolution">
</div>
<input type="button" value="Delete Selection" name="delete_banner_art" id="delete_banner_art" class="delete_banner_art">

JS：

$("#delete_banner_art").click(function () {
    $('.res1').children('input:checked').parent().remove();
});

然而，有几件事情，

在HTML中，我将重复的id属性更改为类。 ID本质上是唯一的，并且在页面上有多个可能会导致将来出现问题。
我认为课程不能以数字开头。

使用jquery remove（）属性删除div元素似乎具有随机行为

5 个答案:

纯JS

JS Fiddle Demo