JavaScript remove all elements with name - Stack Overflow

admin管理员组

文章数量:1291642

I am trying to use JavaScript to remove all the elements with a certian name, but it is only removing the first one.

My code is:

var ele= document.getElementsByName("javascriptaudio");
for(var i=0;i<ele.length;i++)
{
  ele[i].parentNode.removeChild(ele[i]);
}

Can anyone tell me what is wrong?

Thanks

I am trying to use JavaScript to remove all the elements with a certian name, but it is only removing the first one.

My code is:

var ele= document.getElementsByName("javascriptaudio");
for(var i=0;i<ele.length;i++)
{
  ele[i].parentNode.removeChild(ele[i]);
}

Can anyone tell me what is wrong?

Thanks

• javascript

Share Improve this question Follow edited Jul 27, 2014 at 19:42 Valentin Mercier 5,32644 gold badges2727 silver badges5151 bronze badges asked Jul 6, 2014 at 12:37 user2370460user2370460 7,8201111 gold badges3434 silver badges4646 bronze badges 4

• 1 Oh, the beauty of working with live collections. Try deleting backwards. – John Dvorak Commented Jul 6, 2014 at 12:49
• 1 consider using some kind of JS framework to get rid of that boilerplate (and potentially buggy!) code. e.g. in jQuery this is simply $("[name=javascriptaudio]").remove(); – Karoly Horvath Commented Jul 6, 2014 at 13:13
• @karoly the alternative is to better understand what is going on and then code accordingly to that. Trust me, it's more satisfying and also produces code with fewer dependencies. – John Dvorak Commented Jul 6, 2014 at 13:20
• @JanDvorak: Trust you lol. Abstractions are precisely there to not worry about these details. If I read code, I want to see high level functions describing what's done, not the guts, a bloody loop.... If you want to know more about it, that's fine (and it might even be satisfying to you). And if you build a framework/library, you should. But if you are an average developer, that's the best advice I could give. Every self respecting developer would happily introduce some kind of depencendy to get rid of that kind of boiler-plate code. – Karoly Horvath Commented Jul 6, 2014 at 14:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I don't have enough rep to ment on Álvaro G. Vicario. The reason that it works is that the element is removed from ele when it is removed from the DOM. Weird.

The following code should work equally well:

var ele= document.getElementsByName("javascriptaudio");
len = ele.length;
parentNode = ele[0].parentNode;
for(var i=0; i<len; i++)
{
  parentNode.removeChild(ele[0]);
}

Try removing them backwards:

var ele = document.getElementsByName("javascriptaudio");
for(var i=ele.length-1;i>=0;i--)
{
    ele[i].parentNode.removeChild(ele[i]);
}

The problem is that removing elements from ele shifts indexes: if you have 5 items (0 to 4) and remove item 0 you then have 4 items ranging from 0 to 3 (4 bees 3, 3 bees 2, etc.); you should then remove item 0 but your i variable has already incremented to 1.

you need to save length of array outside the loop because it is evaluated with each pass if you place it inside loop criteria. That way you will have correct amount of iterations. Furthermore you need to delete first item in loop each time because with each pass you lose 1 item so you will be outside of range at the end of process.

var ele = document.getElementsByName("javascriptaudio");
var elementsCount = ele.length;
for(var i=0;i<ele.length;i++){
    ele[0].parentNode.removeChild(ele[0]);
}

Try the following jQuery code:

$("[name=javascriptaudio]").remove();

本文标签： JavaScript remove all elements with nameStack Overflow