使用 javascript (Chrome OS) 获取父元素 ID

Question

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

curAcc = 0;
newItemInfo = null;
newItemId = null;
removeButtonId = null;

function addAccount(method, account) {
  curAcc = curAcc + 1;
  if (method == "new") {
    newItemId = "a" + curAcc;
    removeButtonId = "ra" + curAcc + "btn";

    newItemInfo = {
      Website: websiteIn.value,
      Username: usernameIn.value,
      Password: passwordIn.value,
      Id: newItemId,
      RemoveButton: {Id: removeButtonId}
    };
  } else if (method == "load") {}
  console.log(newItemInfo);

  newItem = document.createElement("li");
  newItem.innerHTML =
    "<li><label><b>Website:</b></label> <input type='text' value='" + 
      newItemInfo.Website + "' id='a" + curAcc + "ws'></li>" +
    "<li><label><b>Username:</b></label> <input type='text' value='" + 
      newItemInfo.Username + "' id='a" + curAcc + "un'></li>" +
    "<li><label><b>Password:</b></label> <input type='text' value='" + 
      newItemInfo.Password + "' id='a" + curAcc + "pw'></li>" +
    "<li><button id='" + newItemInfo.RemoveButton.Id + "'>Remove</button>
      </li>" +
    "<br/><br/>";
   newItem.setAttribute("id", newItemId);
   accountList.appendChild(newItem);

   removeButton = document.getElementById(removeButtonId);
   removeButton.addEventListener("click", function(event) {
   console.log("Button ID:" + this.id);
 });

}

删除按钮和列表项是使用 .innerHTML 创建的。 我尝试使用 accountList.removeChild(document.getElementById(newItemId)); 它有效，但它只删除了最近创建的列表项，并且在第一次使用后没有删除任何其他内容。谁能告诉我如何使用 addEventListener 获取移除按钮以从列表中移除 newItem？

Answer 1

一旦您在函数中创建元素并且函数结束，Javascript 就会失去作用域。

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

通过使用event.target 选择器，您可以获得按钮。其父项 (parentNode) 是列表项本身。其父级是实际列表。我猜你想从列表中删除 li 项目。而不仅仅是来自 li 项目的按钮。

我将代码写得更宽泛一些，以使其更明显。

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
});

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

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

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
});

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