clear dom javascript

Removing an element is much easier, as it only requires the element's ID. 1. function removeElement(elementId) { 2. // Removes an element from the document. 3. var element = document. getElementById(elementId); 4. element. parentNode. removeChild(element); 5. } Example: <h1>The remove() Method</h1> <p>The remove() method removes the element from the DOM.</p> <p id="demo">Click the button, and this paragraph will be removed from the DOM.</p> <button onclick="myFunction()">Remove paragraph</button> <script> function myFunction() { var myobj = document.getElementById("demo"); myobj.remove(); } </script>

// Get the element you want to remove var element = document.getElementById(elementId); // Get the parent and remove the element since it is a child of the parent element.parentNode.removeChild(element);

javascript code to reset items in dom

<body>
    <label>Input:</label>
    <input type="text" id="myInput">
    <button onclick="add_Item()">ADD ITEMS</button>
    <button onclick="search_Item()">SEARCH ITEMS</button>
    <button onclick="reset_Item()">RESET</button>
    <div id="items"></div>
</body>
<script>

var arr=[];
function add_Item(){
var inpt=document.getElementById("myInput");
// console.log(inpt);
var para=document.createElement("p");
para.textContent=inpt.value;
var parent=document.getElementById("items");
parent.appendChild(para);
arr.push(inpt.value);
inpt.value="";
}
function search_Item(){
    var srch=document.getElementById("myInput");
    var index=-1;
    for(var i=0;i<arr.length;i++){
        if(arr[i] == srch.value){
            index=i;
            break;
        }
    }
    var parent=document.getElementById("items");
        var childrens=parent.querySelectorAll("p");
        for(var i=0;i<childrens.length;i++){
            // childrens[i].style.background="white"; //for highlighting the matched one while keeping others
            childrens[i].remove();
        }
    if(index>=0){
        var matchedItem=document.createElement("p");
        matchedItem.style.backgroundColor="yellow";
        matchedItem.textContent=arr[index];
        parent.appendChild(matchedItem);
    }

}
function reset_Item(){
    var parent=document.getElementById("items");
    var childrens=parent.querySelectorAll("p");
    for(var i=0;i<childrens.length;i++){
       childrens[i].remove();
    }
    for(var i=0;i<arr.length;i++){
        var item=document.createElement("p");
        item.textContent=arr[i];
        parent.appendChild(item);
    }
}

</script>

Posted by: Guest on August-23-2021

Code answers related to "clear dom javascript"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "clear dom javascript"

Code answers related to "clear dom javascript"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us