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

Question

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

$('#myid').remove()

但当然这只会删除 myid 的第一个实例。 如何遍历 myid 的所有实例并将它们全部删除？ 我认为 jQuery $.each()方法可能是正确的方法，但我想不出遍历所有 myid 实例并将它们全部删除的语法。

如果有一种干净的方法可以使用常规 JS（不使用 jQuery）来做到这一点，我也愿意这样做。 也许问题是 id 应该是唯一的（即你不应该有多个带有id="myid"的元素）？

Answer 1

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

Answer 2

你所有的元素都应该有一个唯一的 ID，所以带 #myid 的元素不应该超过一个

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

尽管如此，试试这个：

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

Answer 3

DOM 元素的 id 应该是唯一的。 请改用类 ( <span class='myclass'> )。 要删除此类的所有跨度：

$('.myclass').remove()

Answer 4

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

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

试试这个：

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

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

工作演示

Answer 5

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

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

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

Answer 6

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

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

此处为官方 jQuery 文档。

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是可在此处使用的最跨浏览器兼容的方法。 getElementsByClassName会好得多，但 Internet Explorer <= IE 8 不支持。

工作演示