Question

好的，我这次会非常具体。

$(Version)

}

使用.innerHTML创建删除按钮以及列表项。我尝试使用accountList.removeChild（document.getElementById（newItemId））; 它工作但它只删除了最近创建的列表项，并且在第一次使用后没有删除任何其他内容。任何人都可以告诉我如何使用addEventListener从列表中删除newItem的删除按钮？

Answer 1

一旦在函数中创建元素并且函数结束，Javascript就会丢失范围。

您可以通过将此范围绑定到偶数listenet来传递此范围。通过将this标识符绑定到具有.bind(this)的函数来传递它。然后，您可以使用target选择器调用元素。

使用event.target选择器，您可以使用按钮。那个（parentNode）的父亲是listitem本身。其父级是实际列表。我猜你想要从列表中删除li项目。而不仅仅是li项目中的按钮。

我把代码写得更加广泛，以使其更加明显。

＆＃13;

var list = document.getElementById("list"); // The list element

addButton = document.getElementById("btnAdd"); // The add button
addButton.addEventListener("click", function() {
  var newButton = document.createElement("button"); // Create a new button
  var btnText = document.createTextNode("Remove"); // Create the button's text
  newButton.appendChild(btnText); // Add the text to the button
  
  newButton.addEventListener("click", function(event) { // Create click listener for button
    var elButton = event.target; // The button that you clicked
    var elLi = elButton.parentNode; // The <li> element that button was in
    list.removeChild(elLi); // Remove the <li> element from the list
  }.bind(this)); // Bind the this so the "event" parameter will be the clicked button
  
  var newItem = document.createElement("li"); // Create a new <li> element
  newItem.appendChild(newButton); // Add the button to that element
  list.appendChild(newItem); // Add the <li> element to the list
});

＆＃13;

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<button id="btnAdd">Add</button>

＆＃13;

编辑：由于您希望在单击按钮时删除多个列表项，因此您可以通过添加另一层lis来简单地推断。就这样：

＆＃13;

var list = document.getElementById("list"); // The list element

addButton = document.getElementById("btnAdd"); // The add button
addButton.addEventListener("click", function() {
  var newButton = document.createElement("button"); // Create a new button
  var btnText = document.createTextNode("Remove"); // Create the button's text
  newButton.appendChild(btnText); // Add the text to the button
  
  newButton.addEventListener("click", function(event) { // Create click listener for button
    var elButton = event.target; // The button that you clicked
    var elLi = elButton.parentNode; // The <li> element that button was in
    var parentLi = elLi.parentNode; // The <li> element all the other <li>s are in
    list.removeChild(parentLi); // Remove the <li> element from the list
  }.bind(this)); // Bind the this so the "event" parameter will be the clicked button
  
  var newItemBtn = document.createElement("li"); // Create a new <li> element
  newItemBtn.appendChild(newButton); // Add the button to that element
  
  // Create other child <li>s
  var newItem1 = document.createElement("li");
  newItem1.appendChild(document.createTextNode("Item 1"));
  var newItem2 = document.createElement("li");
  newItem2.appendChild(document.createTextNode("Item 2"));
  var newItem3 = document.createElement("li");
  newItem3.appendChild(document.createTextNode("Item 3"));
  
  var parentLi = document.createElement("li"); // Create a new <li> parent element to wrap the other <li> elements in
  parentLi.appendChild(newItem1); // Add the child <li> to that element
  parentLi.appendChild(newItem2); // Add the child <li> to that element
  parentLi.appendChild(newItem3); // Add the child <li> to that element
  parentLi.appendChild(newItemBtn); // Add the child <li> to that element
  list.appendChild(parentLi); // Add the <li> element to the list
});

＆＃13;

<ul id="list">
  <li>Some listitem</li>
</ul>
<button id="btnAdd">Add</button>

＆＃13;

使用javascript获取父元素ID（Chrome OS）

1 个答案: