JSFiddle - React, Tailwind, and code Playground

by briguy37

HTML

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

<div id="div2">
    <input value="nonFoo2"/>
    <div class="foo">foo4</div>
    <div>nonFoo3</div>
    <div class="foo">foo5</div>
    <div class="foo">foo6</div>
    <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 childNodesToRemove = document.getElementById(parentId).getElementsByClassName('foo');
    for(var i=childNodesToRemove.length-1;i >= 0;i--){
        var childNode = childNodesToRemove[i];
        childNode.parentNode.removeChild(childNode);
    }
}

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