简单的onclick无法删除子节点

Simple onclick fails to remove child node

本文关键字：删除 子节点 onclick 简单      更新时间：2023-09-26
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function() {
  var oBtn = document.getElementById('btn1');
  var oTxt = document.getElementById('txt1');
  var oUl = document.getElementById('ul1');
  var aA = [];
  oBtn.onclick = function() {
    var oLi = document.createElement('li');
    var aLi = document.getElementsByTagName('li');
    // add <a> to li
    oLi.innerHTML = oTxt.value + ' <a href="javascript:;">delete</a>';
    if (aLi.length > 0) {
      oUl.insertBefore(oLi, aLi[0]);
    } else {
      oUl.appendChild(oLi);
    }
    // everytime add an li, add <a> which is in <li> to aA
    aA.push(oLi.children[0]);
  };
  for (var i = 0; i < aA.length; i++) {
    aA[i].onclick = function() {
      oUl.removeChild(this.parentNode);
    }
  }
}
</script>
</head>
<body>
  <input id='txt1' type="text" />
  <!-- Add an li element -->
  <input id="btn1" type="button" value="Add li" />
  <ul id="ul1">
  </ul>
</body>
</html>

大家好，我是一个javascript初学者，我有一个麻烦在点击事件，以下是我的问题:

当我点击oBtn.onclick时，它创建了一个li元素到ul，然后li的innerHTML包含标签"a"并被推送到一个名为aA的数组。

然而，在aA[i].onclick中，它不起作用，那么我的代码中的问题是什么?

您从未做过任何事情来连接a元素的click事件的事件处理程序。看到评论:

window.onload = function() {
  var oBtn = document.getElementById('btn1');
  var oTxt = document.getElementById('txt1');
  var oUl = document.getElementById('ul1');
  var aA = [];
  oBtn.onclick = function() {
    var oLi = document.createElement('li');
    var aLi = document.getElementsByTagName('li');
    // Create deletion link and hook it up
    var a = document.createElement('a');
    a.href = "javascript:;";
    a.innerHTML = "delete";
    a.onclick = deleteOnClick;
    // add text and <a> to li
    // note the use of createTextNode, in case the user types something with < in it
    oLi.appendChild(document.createTextNode(oTxt.value + " "));
    oLi.appendChild(a);
    // Add at the beginning of the list
    oUl.insertBefore(oLi, oUl.firstChild);
    // everytime add an li, add <a> which is in <li> to aA
    aA.push(oLi.children[0]);
  };
  
  // Called by click handler to delete the clicked' element's parent
  function deleteOnClick() {
    var parent = this.parentNode;
    parent.parentNode.removeChild(parent);
  }
};
<input id='txt1' type="text" />
  <!-- Add an li element -->
  <input id="btn1" type="button" value="Add li" />
  <ul id="ul1">
  </ul>

其他注释:

  1. onclick是快速和容易的，但它不能很好地发挥与其他。看看使用现代事件处理(addEventListner)。如果您需要支持过时的浏览器，如IE8，请参阅此答案，以获得即使缺少addEventListener也能工作的功能。

  2. 在head中加载脚本(不使用async或defer)是糟糕的做法。除非有很好的理由做其他事情，否则将它们放在文档正文的末尾，就在结束</body>标记之前。

  3. window上的load事件发生在页面加载过程的非常晚，直到所有图像和样式表以及其他外部资源完成加载之后。除非有很好的理由等待那么长时间，否则请尽早连接处理程序。如果你把你的脚本放在body的末尾(见#2)，你可以在脚本的顶层做它。

  4. 把你的代码包装成这样的作用域函数:

    (function() {
    // ...your code here...
})();

    将为您省去不少麻烦，否则所有顶级变量和函数都是全局变量。全局命名空间已经太拥挤了，导致冲突成为一个问题。

  5. 为您的delete处理程序研究事件委托的想法。您可以处理ul元素上的单击，然后检查它在冒泡时是否经过a元素。这让您不必担心稍后创建删除链接时将其连接起来。

您需要在创建锚点之后绑定锚点单击事件-您尝试在创建锚点之前绑定它

window.onload = function() {
  var oBtn = document.getElementById('btn1');
  var oTxt = document.getElementById('txt1');
  var oUl = document.getElementById('ul1');
  var aA = [];
  oBtn.onclick = function() {
    var oLi = document.createElement('li');
    var aLi = document.getElementsByTagName('li');
    // add <a> to li
    oLi.innerHTML = oTxt.value + ' <a href="javascript:;">delete</a>';
    if (aLi.length > 0) {
      oUl.insertBefore(oLi, aLi[0]);
    } else {
      oUl.appendChild(oLi);
    }
    // everytime add an li, add <a> which is in <li> to aA
   // aA.push(oLi.children[0]);                         <- don't think you need this array anymore
    
    // bind your anchor click here
    oLi.children[0].onclick = function() {
      oUl.removeChild(this.parentNode);
    }
  };
}
  <input id='txt1' type="text" />
  <!-- Add an li element -->
  <input id="btn1" type="button" value="Add li" />
  <ul id="ul1">
  </ul>

相关文章：