Answers for "javascript code to reset items in dom"

0

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 "javascript code to reset items in dom"

Code answers related to "Javascript"

Browse Popular Code Answers by Language