我正在尝试制作一个清晰的按钮。 当用户单击清除按钮时，所有列表都应永久清除

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