Estoy tratando de hacer un botón claro. cuando el usuario hace clic en el botón Borrar, toda la lista debe borrarse de forma permanente. La lista aparecerá cuando el usuario ingrese algo en el campo de entrada y lo guarde con el botón GUARDAR y luego la lista aparecerá debajo del botón Guardar.
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>Esto debería solucionar tu problema. primero debe eliminar todos los elementos secundarios del elemento ul.
while(ulEl.firstChild){ ulEl.removeChild(ulEl.firstChild); }y necesitas vaciar la matriz.
mySearch = []Código completo:
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 = [] })