Question

我有一个带有几个跨度的表单，其中id =“myid”。我希望能够从DOM中删除具有此id的所有元素，我认为jQuery是最好的方法。我想出了如何使用$ .remove（）方法删除此id的一个实例，只需执行以下操作：

$('#myid').remove()

但当然只删除了myid的第一个实例。如何迭代所有myid实例并将其全部删除？我认为jquery $ .each（）方法可能就是这样，但是我无法弄清楚迭代myid所有实例的语法并将它们全部删除。

如果使用常规JS（不使用jQuery）有一个干净的方法来做到这一点，我也对此持开放态度。也许问题是id应该是唯一的（即你不应该有多个id =“myid”的元素）？

谢谢，

克里斯

Answer 1

.remove()应删除所有这些内容。我认为问题在于您使用的是ID。应该只有一个 HTML元素在页面上有一个特定的ID，所以jQuery正在优化而不是全部搜索它们。改为使用类。

Answer 2

所有元素都应该有唯一的ID，因此#myid

不应该有多个元素

“id”是唯一标识符。每次在文档中使用此属性时，它必须具有不同的值。如果您使用此属性作为样式表的钩子，则使用类（组元素）而不是id（用于标识一个元素）可能更合适。

Neverthless，试试这个：

$("span[id=myid]").remove();

Answer 3

dom元素的id应该是唯一的。改为使用class（<span class='myclass'>）。要删除此类的所有范围：

$('.myclass').remove()

Answer 4

如果要删除具有匹配ID部分的所有元素，例如：

<span id='myID_123'>
<span id='myID_456'>
<span id='myID_789'>

试试这个：

$("span[id*=myID]").remove();

不要忘记'*' - 这会立刻将它们全部删除 - 干杯

Working Demo

Answer 5

您应该为多个元素使用class，因为id只是一个元素。要回答关于.each()语法的问题，这就是它的样子：

$('#myID').each(function() {
    $(this).remove();
});

官方JQuery文档here。

Answer 6

最干净的方法是使用html5选择器api，特别是querySelectorAll()。

var contentToRemove = document.querySelectorAll("#myid");
$(contentToRemove).remove();

querySelectorAll()函数返回与特定id匹配的dom元素数组。将返回的数组分配给var后，可以将其作为参数传递给jquery remove()。

Answer 7

如前所述，只有一个元素才能拥有特定ID。请改用类。这是删除节点的无jQuery版本：

var form = document.getElementById('your-form-id');
var spans = form.getElementsByTagName('span');

for(var i = spans.length; i--;) {
    var span = spans[i];
    if(span.className.match(/\btheclass\b/)) {
        span.parentNode.removeChild(span);
    }
}

可以在此处使用的

getElementsByTagName is the most cross-browser-compatible method。 getElementsByClassName会好得多，但Internet Explorer＆lt; = IE 8不支持。

Working Demo

使用jquery删除具有给定id的所有元素

7 个答案: