Javascript：如何刪除綁定的元素以刪除按鈕（動態）

我目前正在使用添加按鈕將輸入從文本框添加到列表中。我也將一個按鈕綁定到每個這些列表元素，然後將它們附加到無序列表中。如何刪除相應刪除按鈕的onclick元素？純粹的JavaScript只。Javascript：如何刪除綁定的元素以刪除按鈕（動態）

window.onload = function() { 
 

 
    var elements = []; 
 
    var textInput; 
 

 
    document.getElementById("addButton").onclick = function() { 
 

 
    textInput = document.getElementById("inputBox").value; 
 

 
    if (textInput == "") { 
 
     alert("Make sure your input is not empty!"); 
 
    } else { 
 

 

 
     var liNode = document.createElement('li'); 
 
     var btnNode = document.createElement('button'); 
 

 
     var btnText = document.createTextNode("Remove Item"); 
 
     btnNode.appendChild(btnText); 
 

 
     var textNode = document.createTextNode(textInput); 
 
     liNode.appendChild(textNode); 
 
     liNode.appendChild(btnNode); 
 

 
     document.getElementById("myInputList").appendChild(liNode); 
 
    } 
 

 
    } 
 

 

 
    function addElementToList(element) { 
 
    if (element != "") { 
 
     elements.push(element); 
 
    } else { 
 
     alert("Make sure the input field is not empty!") 
 
    } 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
    <head> 
 
    <script src="func.js"></script> 
 
    </head> 
 

 
    <input type="text" id="inputBox"> 
 
    <br> 
 
    <button id="addButton">Add</button> 
 
    <br> 
 
    <br> 
 
    <ul id="myInputList"></ul> 
 

 
</body> 
 

 
</html>

來源

2016-03-05 shapiro

「我怎樣的onclick刪除相應的刪除按鈕的元素？」你沒有添加它？ –

使用addEventListener註冊click事件在創建的按鈕。

使用.remove()，將對象從它所屬的樹中移除。

試試這個：

window.onload = function() { 
 
    var elements = []; 
 
    document.getElementById("addButton").onclick = function() { 
 
    var textInput = document.getElementById("inputBox").value; 
 
    if (textInput == "") { 
 
     alert("Make sure your input is not empty!"); 
 
    } else { 
 
     var liNode = document.createElement('li'); 
 
     var btnNode = document.createElement('button'); 
 
     var btnText = document.createTextNode("Remove Item"); 
 
     btnNode.appendChild(btnText); 
 
     var textNode = document.createTextNode(textInput); 
 
     liNode.appendChild(textNode); 
 
     liNode.appendChild(btnNode); 
 
     document.getElementById("myInputList").appendChild(liNode); 
 
     btnNode.addEventListener('click', removeHandler); 
 
    } 
 
    } 
 

 
    function removeHandler() { 
 
    this.parentNode.remove(); // this will be `button` element and `parentNode` will be `li` element 
 
    } 
 

 
    function addElementToList(element) { 
 
    if (element != "") { 
 
     elements.push(element); 
 
    } else { 
 
     alert("Make sure the input field is not empty!") 
 
    } 
 
    } 
 
}

<input type="text" id="inputBox"> 
 
<br> 
 
<button id="addButton">Add</button> 
 
<br> 
 
<br> 
 
<ul id="myInputList"></ul>

來源

2016-03-05 04:53:20 Rayon

Javascript：如何刪除綁定的元素以刪除按鈕（動態）

回答

相關問題