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

Question

我有一个表单，其中有几个带有id="myid"的元素。我希望能够从DOM中删除所有这个id的元素，我认为使用jQuery是最好的方法。我已经想出如何使用$.remove()方法来删除一个这个id的实例，只需要简单地执行：

$('#myid').remove()

当然，这只能删除第一个myid实例。我该如何迭代所有的myid实例并将它们全部删除？我认为jQuery $.each() 方法可能是一种方法，但我无法弄清楚迭代所有myid实例并将它们全部删除的语法。

如果有用纯JS（不使用jQuery）的简洁方法来解决这个问题，我也可以接受。也许问题在于id应该是唯一的（即不应该有多个带有id="myid"的元素）？

- Chris

---

尝试使用我下面发布的代码片段，它应该可以工作。 - ace

“给定ID的所有元素”这个词让我感到困惑。在任何地方，ID都应该是唯一的。 - domih

Answer 1

.remove() 应该删除所有匹配的元素。我认为问题在于你正在使用 ID。页面上只应该有一个特定 ID 的 HTML 元素，因此 jQuery 会优化并且不会搜索所有匹配项。改用 class 代替。

- mpen

Answer 2

你的所有元素都应该具有唯一的ID，因此不应该有多个带有#myid的元素。

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

尽管如此，请尝试这样做：

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

- ace

Answer 3

DOM元素的id应该是唯一的。使用class代替 (<span class='myclass'>)。 要移除所有具有这个class的span：

$("span.myclass").remove();

$('.myclass').remove()

- Minh Nguyen

Answer 4

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

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

试一下这个：

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

不要忘记加上 '*' - 这样会一次性删除所有内容 - 干杯

演示示例

- PernerOl

Answer 5

最简单的方法是使用html5选择器API，特别是querySelectorAll()方法。

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

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

- chad eubanks

Answer 6

你应该使用 class 来为多个元素添加样式，而不是将 id 用于单个元素。关于 .each() 的语法问题，以下是示例代码：

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

Official jQuery documentation here.

- Peter Oram

Answer 7

如已经提到的那样，只有一个元素可以拥有特定的ID。使用class代替。这是一个无需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支持。

工作演示

- Felix Kling