JavaScript通过按钮删除li元素
[英]JavaScript remove li element by button
问题描述
Please help to configure the button on removing dynamic elements. 
请帮助配置删除动态元素的按钮。 I have an code : https://www.w3schools.com/code/tryit.asp?filename=G2T2WSPSDUVS 我有一个代码： https : //www.w3schools.com/code/tryit.asp?filename=G2T2WSPSDUVS
Code : 代码：
<!DOCTYPE html>
<html>
<body>
<div>
<input type="checkbox" id="coffee" name="coffee" checked>
<label for="coffee">Coffee</label>
</div>
<div>
<input type="checkbox" id="gym" name="gym">
<label for="gym">Gym</label>
</div>
<div>
<input type="checkbox" id="rose" name="rose">
<label for="rose">Rose</label>
</div>
<button onclick="myFunction()">Try it</button>
<ul id="myList"></ul>
<script>
function myFunction() {
var node = document.createElement("LI");
var checkBoxCoffe = document.getElementById("coffee");
var checkBoxGym = document.getElementById("gym");
var checkBoxRose = document.getElementById("rose");
var textnode = document.createTextNode("");
if (checkBoxCoffe.checked == true){
textnode.textContent=textnode.textContent+"Coffee; "
}
if (checkBoxGym.checked == true){
textnode.textContent=textnode.textContent+"Gym; "
}
if (checkBoxRose.checked == true){
textnode.textContent=textnode.textContent+"Rose; "
}
var button = document.createElement("button");
button.innerHTML = "Remove";
node.appendChild(textnode);
node.appendChild(button);
document.getElementById("myList").appendChild(node);
}
</script>
</body>
</html>
How I can do that each button will remove exectly selected li element? 我该怎么做，每个按钮将删除选择过的li元素？ everything is working only remove button still need to do thanks 一切正常，只有删除按钮仍然需要做，谢谢
4 个解决方案
解决方案1
2 已采纳 2019-04-06 10:03:23
add onclick event to button before node.appendChild(button); 将onclick事件添加到node.appendChild（button）之前的按钮；
button.onclick = function(){
button.parentElement.remove()
return;
};
解决方案2
0 2019-04-06 10:18:23
Here is something i tried. 这是我尝试过的东西。 (Note : I will suggest you to use something like `jquery' which will ease out many things. （注意：我建议您使用“ jquery”之类的东西，这样可以简化很多事情。
document.getElementById('add').addEventListener('click',function(){ addItems(); }); function addItems(){ var parent = document.createElement('div'); var text = document.createElement('input'); text.innerText = "Click button"; var button = document.createElement('button'); button.className = "btn"; button.innerText = "Click"; parent.appendChild(text); parent.appendChild(button); // this is something you are looking for. button.addEventListener('click',function(){ this.parentNode.remove(); }); document.getElementById('test').appendChild(parent); }
<div id="test"> </div> <button id="add"> Add more </button>
Happy Coding! 编码愉快！
解决方案3
0 2019-04-06 10:29:24
Register the click event to the <ul> and then delegate the click event to the actual button clicked ( event.target ). 将click事件注册到<ul> ，然后将click事件委托给实际单击的按钮（ event.target ）。 Details commented in demo 演示中详细评论
// Register click event to button#add document.getElementById('add').onclick = addItem; // Reference <ul> var list = document.getElementById('list'); function addItem(e) { // Get all checked checkboxes var chx = document.querySelectorAll('input:checked'); // Clear list list.innerHTML = ''; // Loop through the checked checkboxes for (let i = 0; i < chx.length; i++) { // Create a <li> var li = document.createElement('LI'); // Set <li> text to the checked checkbox label text li.textContent = chx[i].nextElementSibling.textContent; // Append a button to <li> li.insertAdjacentHTML('beforeend', ` <button>×</button>`); // Append <li> to <ul> list.appendChild(li); } } // Register click event to <ul> list.onclick = removeItem; function removeItem(e) { // Reference the clicked tag var tgt = e.target; // if the clicked tag is a button... if (tgt.tagName === "BUTTON") { // Find the closest <li> to the clicked button and remove it tgt.closest('li').remove(); } // otherwise just terminate function return false; }
<!DOCTYPE html> <html> <body> <div> <input type="checkbox" id="coffee" name="coffee" checked> <label for="coffee">Coffee</label> </div> <div> <input type="checkbox" id="gym" name="gym"> <label for="gym">Gym</label> </div> <div> <input type="checkbox" id="rose" name="rose"> <label for="rose">Rose</label> </div> <button id='add'>ADD</button> <ul id="list"></ul> </body> </html>
解决方案4
0 2019-04-06 10:32:43
you can try this code 你可以试试这个代码
in this code i create simple removeli function on remove button. 在这段代码中，我在删除按钮上创建了简单的removeli函数。
button.onclick = removeli;
function removeli()
{
document.getElementById("myList").removeChild(node);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.