Javascript 使用 jquery 删除具有给定 id 的所有元素
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4223141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jquery to delete all elements with a given id
提问by Chris
I have a form with several spans with id="myid". I'd like to be able to remove all elements with this id from the DOM, and I think jQuery is the best way to do it. I figured out how to use the $.remove() method to remove one instance of this id, by simply doing:
我有一个带有 id="myid" 的多个跨度的表单。我希望能够从 DOM 中删除所有具有此 id 的元素,我认为 jQuery 是最好的方法。我想出了如何使用 $.remove() 方法删除此 id 的一个实例,只需执行以下操作:
$('#myid').remove()
but of course that only removes the first instance of myid. How do I iterate over ALL instances of myid and remove them all? I thought the jquery $.each() method might be the way, but I can't figure out the syntax to iterate over all instances of myid and remove them all.
但当然这只会删除 myid 的第一个实例。如何遍历 myid 的所有实例并将它们全部删除?我认为 jquery $.each() 方法可能是方法,但我无法弄清楚遍历 myid 的所有实例并将它们全部删除的语法。
If there's a clean way to do this with regular JS (not using jQuery) I'm open to that too. Maybe the problem is that id's are supposed to be unique (i.e. you're not supposed to have multiple elements with id = "myid")?
如果使用常规 JS(不使用 jQuery)有一种干净的方法可以做到这一点,我也愿意。也许问题是 id 应该是唯一的(即你不应该有多个 id = "myid" 的元素)?
Thanks,
谢谢,
Chris
克里斯
回答by mpen
.remove()
should remove all of them. I think the problem is that you're using an ID. There's only supposed to be oneHTML element with a particular ID on the page, so jQuery is optimizing and not searching for them all. Use a classinstead.
.remove()
应该删除所有这些。我认为问题在于您正在使用 ID。页面上应该只有一个具有特定 ID 的 HTML 元素,因此 jQuery 正在优化而不是全部搜索。改用类。
回答by ace
All your elements should have a unique IDs, so there should not be more than one element with #myid
你的所有元素都应该有一个唯一的 ID,所以 #myid 的元素不应超过一个
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
“id”是唯一标识符。每次在文档中使用此属性时,它必须具有不同的值。如果您将此属性用作样式表的挂钩,则使用类(将元素分组)可能比使用 id(用于标识一个元素)更合适。
Neverthless, try this:
尽管如此,试试这个:
$("span[id=myid]").remove();
回答by Minh Nguyen
id of dom element shout be unique. Use class instead (<span class='myclass'>
).
To remove all span with this class:
dom 元素的 id 呼喊是唯一的。请改用类 ( <span class='myclass'>
)。要使用此类删除所有跨度:
$('.myclass').remove()
回答by PernerOl
if you want to remove all elements with matching ID parts, for example:
如果要删除具有匹配 ID 部分的所有元素,例如:
<span id='myID_123'>
<span id='myID_456'>
<span id='myID_789'>
try this:
尝试这个:
$("span[id*=myID]").remove();
don't forget the '*' - this will remove them all at once - cheers
不要忘记 '*' - 这将一次删除它们 - 欢呼
回答by Peter Oram
You should be using a class
for multiple elements as an id
is meant to be only a single element. To answer your question on the .each()
syntax though, this is what it would look like:
您应该将 aclass
用于多个元素,因为 anid
意味着只是一个元素。.each()
不过,要回答您关于语法的问题,它会是这样的:
$('#myID').each(function() {
$(this).remove();
});
Official JQuery documentation here.
官方 JQuery 文档在这里。
回答by chad eubanks
The cleanest way to do it is by using html5 selectors api, specifically querySelectorAll()
.
最干净的方法是使用 html5 选择器 api,特别是querySelectorAll()
.
var contentToRemove = document.querySelectorAll("#myid");
$(contentToRemove).remove();
The querySelectorAll()
function returns an array of dom elements matching a specific id. Once you have assigned the returned array to a var
, then you can pass it as an argument to jquery remove()
.
该querySelectorAll()
函数返回与特定 id 匹配的 dom 元素数组。将返回的数组分配给 a 后var
,就可以将其作为参数传递给 jquery remove()
。
回答by Felix Kling
As already said, only oneelement can have a specific ID. Use classes instead. Here is jQuery-free version to remove the nodes:
如前所述,只有一个元素可以有一个特定的 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 methodthat can be used here. getElementsByClassName
would be much better, but is not supported by Internet Explorer <= IE 8.
getElementsByTagName
是可以在这里使用的最跨浏览器兼容的方法。getElementsByClassName
会好得多,但 Internet Explorer <= IE 8 不支持。