时间戳

首页 > 解决方案 > JavaScript 通过按钮删除 li 元素

javascript - JavaScript 通过按钮删除 li 元素

问题描述

请帮助配置删除动态元素的按钮。我有一个代码：https ://www.w3schools.com/code/tryit.asp?filename=G2T2WSPSDUVS

代码 ：

<!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>

我怎样才能做到每个按钮都会删除精确选择的 li 元素？一切正常，只有删除按钮仍然需要做谢谢

标签： javascripthtmlbutton

解决方案

在node.appendChild(button)之前添加 onclick 事件到按钮；

button.onclick = function(){
    button.parentElement.remove()
    return;
};

推荐阅读