Question

我想在每个要添加的项目旁边添加一个删除按钮。如何正确执行此操作以使所有功能正常工作？

我已经尝试了下面的方法，如代码中所示。这对我来说似乎是正确的，但不起作用。这必须是纯JavaScript`。

var button = document.createElement("BUTTON");
var ul = document.getElementById("list");
var li = document.createElement("li");
function handleAddNewItem() //adds new items and more
{
   var item = document.getElementById("input").value;
   var ul = document.getElementById("list");
   var li = document.createElement("li");

   if (item === '') {
      alert("Input field can not be empty");
   }
   else {
      button.innerText = "Delete";
      li.appendChild(document.createTextNode("- " + item));
      ul.appendChild(li);
      ul.appendChild(button);
   }
   document.getElementById("input").value = ""; //clears input

   //li.onclick = clearDom;
}//code deletes items by clearDom function

document.body.onkeyup = function (e) //allows items to be added with enter button
{
   if (e.keyCode == 13) {
      handleAddNewItem();
   }
}

function clearDom() {
   //e.target.parentElement.removeChild(e.target);//removeChild used
   ul.removeChild(li);
   ul.removeChild(button);
}

button.addEventListener("click", clearDom);




<body>
   <input id="input" placeholder="What needs to be done?">
   <button id="add_button" onclick="handleAddNewItem()">ADD</button>
   <ul id="list">
   </ul>
</body>
<script src="new.js"></script>

</html>

var button = document.createElement("BUTTON");
var ul = document.getElementById("list");
var li = document.createElement("li");

function handleAddNewItem() //adds new items and more
{
  var item = document.getElementById("input").value;
  var ul = document.getElementById("list");
  var li = document.createElement("li");

  if (item === '') {
    alert("Input field can not be empty");
  } else {
    button.innerText = "Delete";
    li.appendChild(document.createTextNode("- " + item));
    ul.appendChild(li);
    ul.appendChild(button);
  }
  document.getElementById("input").value = ""; //clears input

  //li.onclick = clearDom;
} //code deletes items by clearDom function

document.body.onkeyup = function(e) //allows items to be added with enter button
{
  if (e.keyCode == 13) {
    handleAddNewItem();
  }
}

function clearDom() {
  //e.target.parentElement.removeChild(e.target);//removeChild used
  ul.removeChild(li);
  ul.removeChild(button);
}

button.addEventListener("click", clearDom);

<input id="input" placeholder="What needs to be done?">
<button id="add_button" onclick="handleAddNewItem()">ADD</button>
<ul id="list">
</ul>
<!-- commented out to reduce errors in the console
<script src="new.js"></script> -->

我现在正遇到此错误-

“要删除的节点不是此节点的子节点。 HTMLButtonElement.clearDom new.js：33：7“

我想实现与列出的项目一致的删除按钮。以便分别删除一一添加的项目。

Answer 1

不是很好，但是可以解决：）

else {
   button.innerText = 'Delete';
   li.appendChild(document.createTextNode('- ' + item));
   ul.appendChild(li);
   let but = button.cloneNode(true); // <-- solution
   li.appendChild(but);

   // clearDom function
   clearDom();
}

还有删除单个条目的功能

function clearDom() {
   let buttons = document.querySelectorAll('button:not(#add_button)');
   for (let i = 0; i < buttons.length; i++) {
       buttons[i].addEventListener('click', function (e) {
          e.target.parentNode.remove();
       }, false);
   }
}

let button = document.createElement('button');
let ul = document.getElementById('list');
let li = document.createElement('li');

function handleAddNewItem() {
  let item = document.getElementById('input').value;
  let ul = document.getElementById('list');
  let li = document.createElement('li');

  if (item === '') {
    alert('Input field can not be empty');
  }
  else {
    button.innerText = 'Delete';
    li.appendChild(document.createTextNode('- ' + item));
    ul.appendChild(li);
    let but = button.cloneNode(true);
    li.appendChild(but);

    clearDom();
  }
  document.getElementById('input').value = ''; // clears input
}

function clearDom() {
  let buttons = document.querySelectorAll('button:not(#add_button)');
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function (e) {
      e.target.parentNode.remove();
    }, false);
  }
}

document.body.onkeyup = function (e) {
  if (e.keyCode === 13) {
    handleAddNewItem();
  }
};

  <input id="input" placeholder="What needs to be done?">
  <button id="add_button" onclick="handleAddNewItem()">ADD</button>
  <ul id="list"></ul>

Answer 2

我建议：

function handleAddNewItem() {
  /* Move the creation of all variables within the function
     in which they're being used: */
  const button = document.createElement('button'),
    ul = document.getElementById('list'),
    li = document.createElement('li'),
    item = document.getElementById('input').value;

  // here we use String.prototype.trim() to remove leading
  // and trailing whitespace from the entered value, to
  // prevent a string of white-space ('   ') being considered
  // valid:
  if (item.trim() === '') {
    alert("Input field can not be empty");
  } else {
    button.textContent = "Delete";

    // here we again use String.prototype.trim(), this time to
    // avoid the creation of a '                      task              '
    // with extraneous white-space:
    li.appendChild(document.createTextNode("- " + item.trim()));
    // appending the <button> to the <li> instead
    // of the <ul> (of which it would be an invalid
    // child element anyway):
    li.appendChild(button);
    ul.appendChild(li);
  }
  document.getElementById("input").value = ''; //clears input
}

document.body.onkeyup = function(e) //allows items to be added with enter button
{
  if (e.keyCode == 13) {
    handleAddNewItem();
  }
}

// the e - the EventObject - is passed automagically from
// the later use of EventTarget.addEventListener():
function clearDom(e) {

  // e.target is the element on which the event that we're
  // reacting to was originally fired (the <button>):
  const clickedButton = e.target;

  // here we use DOM traversal methods to find the closest
  // ancestor <li> element, and then use ChildNode.remove()
  // to remove it from the DOM:
  clickedButton.closest('li').remove();
}

// using event-delegation to catch the
// delete-button clicks:
// first we retrieve the element already on the page which
// will be an ancestor of the appended elements:
document.getElementById('list')
  // we then bind the clearDom() function - note the deliberate
  // lack of parentheses - as the 'click' event-handler:
  .addEventListener('click', clearDom);

function handleAddNewItem() {
  /* Creating all variables within the function: */
  const button = document.createElement('button'),
    ul = document.getElementById('list'),
    li = document.createElement('li'),
    item = document.getElementById('input').value;

  if (item.trim() === '') {
    alert("Input field can not be empty");
  } else {
    button.textContent = "Delete";
    li.appendChild(document.createTextNode("- " + item));
    li.appendChild(button);
    ul.appendChild(li);
  }
  document.getElementById("input").value = '';
}

document.body.onkeyup = function(e) {
  if (e.keyCode == 13) {
    handleAddNewItem();
  }
}

function clearDom(e) {
  const clickedButton = e.target;
  clickedButton.closest('li').remove();
}

document.getElementById('list')
  .addEventListener('click', clearDom);

<input id="input" placeholder="What needs to be done?">
<button id="add_button" onclick="handleAddNewItem()">ADD</button>
<ul id="list">
</ul>

javascript中的待办事项列表

2 个答案: