Question

请帮助配置删除动态元素的按钮。我有一个代码：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元素？一切正常，只需要删除按钮谢谢

Answer 1

将onclick事件添加到 node.appendChild（button）;

之前的按钮上

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

Answer 2

这是我尝试过的东西。（注意：我建议您使用类似“ 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>

快乐编码！

Answer 3

将click事件注册到<ul>，然后将click事件委托给实际单击的按钮（event.target）。演示中评论了详细信息

// 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', `&nbsp;<button>&times;</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>

Answer 4

您可以尝试此代码

在这段代码中，我在删除按钮上创建了简单的removeli函数。

protected void btnShow_Click(object sender, EventArgs e)
{   
    foreach (GridViewRow row in grdData.Rows)
    {
        string val = ((Label)row.FindControl("lblName")).Text;

        lblMsg.Text = val;
    }
}

JavaScript通过按钮删除li元素

4 个答案: