我正在嘗試制作一個清晰的按鈕。 當用戶單擊清除按鈕時，所有列表都應永久清除

Question

我正在嘗試制作一個清晰的按鈕。 當用戶單擊清除按鈕時，所有列表都應永久清除。 當用戶在輸入字段中輸入內容並通過 SAVE IT 按鈕保存時，將出現列表，然后列表將出現在保存按鈕下方。

 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>

Answer 1

這應該可以解決您的問題。 首先，您需要刪除 ul 元素的所有子元素。

    while(ulEl.firstChild){
        ulEl.removeChild(ulEl.firstChild);
    }

你需要清空數組。

mySearch = []

完整代碼：

    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 = []
    })