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>