i am trying to make a clear button. when user click on the clear button then all list should be clear permanently. list will appear when the user will input something in input field and save that by SAVE IT button and then list will appear below the save button.
let mySearch = []
let inputEl = document.getElementById("input-el")
let saveEl = document.getElementById("save-el")
let ulEl = document.getElementById("ul-el")
let clearEl = document.getElementById("clear-el")
saveEl.addEventListener("click", function () {
mySearch.push(inputEl.value)
inputEl.value = " "
render()
})
function render() {
let listitems = ""
for (let i =0; i < mySearch.length; i++) {
listitems += "<li>" + mySearch[i] + "</li>"
// alternative
/*const list = document.createElement("li")
list.textContent += mySearch[i]
ulEl.append(list) */
}
ulEl.innerHTML = listitems
}
when this clear button click all list which saved by "SAVE IT" button from input field should clear the list
clearEl.addEventListener("click", function() {
ulEl.textcontent = " "
})<div class="save">
<input type="text" id="input-el" class="input" placeholder="Search.."> <br>
<button id="save-el" class="savebut">SAVE IT</button>
<button type="reset" id="clear-el" class="clearbut">clear list</button>
<ul id="ul-el"></ul>
</div>this should solve your problem. first you need to remove all the children of the ul element.
while(ulEl.firstChild){
ulEl.removeChild(ulEl.firstChild);
}
and you need to empty the array.
mySearch = []
Full code:
let mySearch = []
let inputEl = document.getElementById("input-el")
let saveEl = document.getElementById("save-el")
let ulEl = document.getElementById("ul-el")
let clearEl = document.getElementById("clear-el")
let save = document.getElementsByClassName("save")[0]
saveEl.addEventListener("click", function () {
mySearch.push(inputEl.value)
inputEl.value = " "
render()
})
function render() {
let listitems = ""
for (let i =0; i < mySearch.length; i++) {
listitems += "<li>" + mySearch[i] + "</li>"
}
ulEl.innerHTML = listitems
}
clearEl.addEventListener("click", function() {
while(ulEl.firstChild){
ulEl.removeChild(ulEl.firstChild);
}
mySearch = []
})