Question

<!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元素，然后innerHTML li包含标记“a”并被推送到数组名为aA。

但是，在aA[i].onclick中，它不起作用，那么代码中的问题是什么？

Answer 1

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

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>

Answer 2

您永远不会做任何事情来连接a元素的click事件上的事件处理程序。见评论：

＆＃13;

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

＆＃13;

<input id='txt1' type="text" />

  <!-- Add an li element -->
  <input id="btn1" type="button" value="Add li" />
  <ul id="ul1">
  </ul>

＆＃13;

其他一些说明：

onclick既快捷又简单，但与其他人玩得不好。看看使用现代事件处理（addEventListner）。如果您需要支持IE8等过时的浏览器，请参阅this answer以获取即使缺少addEventListener也能正常工作的功能。
在head中加载脚本（不使用async或defer）是不好的做法。除非有充分理由做其他事情，请将它们放在文档正文的末尾，就在结束</body>标记之前。
load上的window事件在页面加载过程中发生非常，等待所有图像和样式表以及其他外部资源加载完毕。除非有充分的理由等待那么久，否则请尽早联系处理程序。如果您将脚本放在body的末尾（参见＃2），则可以在脚本的顶层执行此操作。
将代码包装在这样的作用域函数中：
```
(function() {
    // ...your code here...
})();
```
会为你节省一些心痛，因为否则你所有的顶级变量和函数都是全局变量。全局命名空间已经过于拥挤，使冲突成为一个问题。
查看delete处理程序的事件委派的概念。您可以处理ul元素上的单击，然后在冒泡时检查它是否在途中通过您的a元素。这使您不必担心以后在创建删除链接时将其挂钩。

简单的onclick无法删除子节点

2 个答案: