Question

我已经列出了清单，并且真的在如何引用按钮方面苦苦挣扎我已经用javascript创建了，我想要做的就是删除列表元素也与之相关联，但是当用户向列表中添加诸如“ car”之类的内容时，我无法弄清如何将按钮本身与li元素一起创建。

我尝试浏览文档，观看youtube视频等我只是想不通，需要对其进行深入的解释。

JavaScript

var button = document.getElementById("enter-btn");
var inputBox = document.getElementById("userInput");
var ul = document.querySelector("ul")
var listContent = document.getElementsByTagName("li");


function inputLength() {
    return inputBox.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(inputBox.value));
    ul.appendChild(li);
    inputBox.value = "";
   //Button Creation & Style logic
    var deleteBtn = document.createElement("BUTTON");
    deleteBtn.innerHTML = 'delete task';
    li.appendChild(deleteBtn);
    deleteBtn.style.padding = "10px 20px";
    deleteBtn.style.marginLeft = "20px";
    deleteBtn.style.fontSize = "12px";
}

function buttonCreationStyles(){
    var deleteBtn = document.createElement("BUTTON");
    deleteBtn.innerHTML = 'delete task';
    listContent[i].appendChild(deleteBtn);
    deleteBtn.style.padding = "10px 20px";
    deleteBtn.style.marginLeft = "20px";
    deleteBtn.style.fontSize = "12px";
}


function addListAfterClick(){
    if (inputLength() > 0){
        createListElement();
    }   
}

function addListAfterKeypress(event){
    if (inputLength() > 0 && event.keyCode === 13){
        createListElement();
    }   
}

function listLength(ul){
    return listContent.length;
}

function listLoopWithBtns(){
    for(i=0; i < listContent.length; i++){
        buttonCreationStyles();
    }

}
ul.onclick = function(event){
    var target = event.target;
    target.classList.toggle("done");
}



listLoopWithBtns();
button.addEventListener("click", addListAfterClick);
inputBox.addEventListener("keypress", addListAfterKeypress);

我知道如何清除实际的位置，但我不确定该如何使用它。

如何使用JavaScript从列表中删除动态按钮元素？

0 个答案: