Skip to content Skip to sidebar Skip to footer
Home / Javascript / Removechild

Remove Multiple Elements With Same Name Using RemoveChild?

Post a Comment
I have an elements with multiple elements inside. The elements inside all have the same name. Is there away to have a function remove all of them? (refer to this question for exam

Solution 1:

Here's a solution that removes the first level children with the specified name for the parent with the specified id. If you want to go deeper, you can recursively call it on the child elements you get inside (you'll have to add a parent parameter as well).

function removeChildren (params){
    var parentId = params.parentId;
    var childName = params.childName;

    var childNodes = document.getElementById(parentId).childNodes;
    for(var i=childNodes.length-1;i >= 0;i--){
        var childNode = childNodes[i];
        if(childNode.name == 'foo'){
            childNode.parentNode.removeChild(childNode);
        }
    }
}

And to call it:

removeChildren({parentId:'div1',childName:'foo'});

And a fiddle for testing:

Notes: You can only access the name element dependably in JavaScript when it supported on your element (e.g. NOT on DIVs!). See here for why.

UPDATE:

Here's a solution using className based on our conversation:

function removeChildren (params){
    var parentId = params.parentId;
    var childName = params.childName;

    var childNodesToRemove = document.getElementById(parentId).getElementsByClassName('foo');
    for(var i=childNodesToRemove.length-1;i >= 0;i--){
        var childNode = childNodesToRemove[i];
        childNode.parentNode.removeChild(childNode);
    }
}

Solution 2:

2021 Answer:

Perhaps there are lots of way to do it, such as Element.replaceChildren(). I would like to show you an effective solution with only one redraw & reflow supporting all ES6+ browsers.

function removeChildren(cssSelector, parentNode){
    var elements = parentNode.querySelectorAll(cssSelector);
    let fragment = document.createDocumentFragment(); 
    fragment.textContent=' ';
    fragment.firstChild.replaceWith(...elements);
}

Usage: removeChildren('.foo',document.body);: remove all elements with className foo in <body>


Solution 3:

ok this should be easy. First get the parent element:

var theParent = document.getElementById("notSoHappyFather");

then get an array of the nodes that you want to remove:

var theChildren = theParent.getElementsByName("unluckyChild");

Lastly, remove them with a loop:

for (var i = 0; i < theChildren.length; i++)
{
  theParent.removeChild(theChildren[i]);
}

Solution 4:

A sample of your HTML would get you a more complete answer, but one can fairly easy call DOM functions to get the list of children and just remove them. In jQuery, remove all children would be something like this:

$("#target > *").remove();

or

 $("#target").html("");

And, you can see a demo here: http://jsfiddle.net/jfriend00/ZBYCh/

Or, not using jQuery you could also do:

document.getElementById("target").innerHTML = "";

If you're trying to only remove a subset of the children (and leave others intact), then you need to be more specific how one would determine which children to leave and which to remove. In jQuery, you could use a .find() select or a filter() selector to narrow the list of children to just the children you wanted to target for removal.


Post a Comment for "Remove Multiple Elements With Same Name Using RemoveChild?"