JSFiddle - React, Tailwind, and code Playground

by briguy37

HTML

<div id="div1">
    <input name="foo" value="foo1"/>
    <input name="foo" value="foo2"/>
    <input name="nonFoo" value="nonfoo1"/>
    <input name="foo" value="foo3"/>
</div>
<input id="removeFoo1" type="button" value="remove foos from div 1"/>

<div id="div2">
    <input name="nonFoo" value="nonFoo2"/>
    <input name="foo" value="foo4"/>
    <input name="nonFoo" value="nonFoo3"/>
    <input name="foo" value="foo5"/>
    <input name="foo" value="foo6"/>
    <input name="nonFoo" value="nonFoo4"/>
</div>
<input id="removeFoo2" type="button" value="remove foos from div 2"/>

JavaScript

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);
        }
    }
}

document.getElementById('removeFoo1').onclick = function(){removeChildren({parentId:'div1',childName:'foo'});};
    
 document.getElementById('removeFoo2').onclick = function(){removeChildren({parentId:'div2',childName:'foo'});};