您有两个主要问题

Question

我是一名javascript初学者，并尝试制作一个用户可以添加或删除项目的简单列表。将项目添加到列表可以正常工作，但事件监听器不会在删除项目时工作。

＆＃13;

txt = document.getElementById('txt_input');
submit = document.getElementById('txt_submit');
removeBtn = document.getElementsByClassName('remove');
window.onload = txt.focus();
submit.onclick = addToList;

for (var i = 0; i < removeBtn.length; i++) {
  if (document.querySelector("li") !== null) {
  	removeBtn[i].onclick = removeFromList;
  }    	
}

function removeFromList(e) {
  event.target.parentNode.outerHTML = "";
}

function createRemoveButton(parent) {
  var listBtn = document.createElement('input');
  listBtn.setAttribute('type', 'submit');
  listBtn.setAttribute('value', 'Remove');
  listBtn.setAttribute('class', 'remove');
  listBtn.style.marginLeft = '20px';
  parent.appendChild(listBtn);
}
var list;

function addToList() {
  if (document.querySelector("ul") === null) {
    list = document.createElement('ul');
  }
  var listItem = document.createElement('li');
  var txtNode = document.createTextNode(txt.value);
  listItem.appendChild(txtNode);
  createRemoveButton(listItem);
  list.appendChild(listItem);
  document.body.appendChild(list);
  txt.value = '';
  txt.focus();
}

＆＃13;

<input type="text" id="txt_input">
<input type="submit" value="Add" id="txt_submit">

＆＃13;

Answer 1

您有两个主要问题

您正在使用未声明的变量--force-broken-world

event

您需要将function removeFromList(e) { event.target.parentNode.outerHTML = ""; ^事件绑定到新元素。

请查看包含这些修补程序的代码段。

＆＃13;

click

＆＃13;

请参阅？现在正在删除该元素。

Answer 2

 <body>
     <input type="text" id="txt_input">
     <input type="submit" onclick="addToList()" value="Add">

      <script>
       txt = document.getElementById('txt_input');

    window.onload = txt.focus();

    function removeFromList(e) {
      e.target.parentNode.outerHTML = "";
      txt.focus();
    }


    function createRemoveButton(parent) {
      var listBtn = document.createElement('input');
      listBtn.setAttribute('type', 'submit');
      listBtn.setAttribute('value', 'Remove');
      listBtn.setAttribute('class', 'remove');
      listBtn.style.marginLeft = '20px';

      listBtn.addEventListener('click', removeFromList)

      parent.appendChild(listBtn);
    }


    var list;


    function addToList() {
      if (document.querySelector("ul") === null) {
        list = document.createElement('ul');
      }

      var listItem = document.createElement('li');
      var txtNode = document.createTextNode(txt.value);

      listItem.appendChild(txtNode);
      createRemoveButton(listItem);
      list.appendChild(listItem);
      document.body.appendChild(list);

      txt.value = '';
      txt.focus();
    }
  </script>
</body>

Javascript：事件监听器无法正常工作

2 个答案:

您有两个主要问题

请查看包含这些修补程序的代码段。