Question

我仍在学习JS，并且在单击Java脚本中的元素时删除

元素存在一些小问题。也许有人可以提供帮助或提供建议？

这是我的代码：

var add = document.getElementById("add-button"); add.addEventListener("click", function() { var ul = document.getElementById("tasks"); var input = document.getElementById("new-task").value; var li = document.createElement("li"); ul.appendChild(li); li.innerText = input; var i = document.createElement("i"); i.classList.add('fas', 'fa-times'); // i.className = 'fas fa-times'; li.appendChild(i); input.value = ""; }); var remove = document.querySelectorAll(".fas"); remove.addEventListener("click", function() { for (var i = 0; i < remove.length; i++) { remove[i].classList.remove('remove-list'); } });

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> </head> <body> <div class="wrapper"> <div class="to-do-container"> <div class="input-data"> <input id="new-task" type="text"> <button id="add-button" type="button">Add</button> </div> <ul id="tasks"> <li class="remove-list">Zadzwonić do...<i id="fas" class="fas fa-times"></i></li> <li class="remove-list">Odebrać dzieci z...<i class="fas fa-times"></i></li> <li class="remove-list">Kupić na obiad...<i class="fas fa-times"></i></li> <li class="remove-list">Umówić się na...<i class="fas fa-times"></i></li> </ul> </div> </div> </body> </html>

我使用循环是因为当我使用querySelectorAll时，有必要进行循环。预先感谢您的帮助。

Answer 1

您可以编写一个函数来删除父li，并在addEventLister内调用此函数，在创建i时需要附加此函数

var add = document.getElementById("add-button");
add.addEventListener("click", function() {
  var ul = document.getElementById("tasks");
  var input = document.getElementById("new-task").value;

  var li = document.createElement("li");
  ul.appendChild(li);
  li.innerText = input;

  var i = document.createElement("i");
  i.classList.add('fas', 'fa-times');
  i.addEventListener("click", removeLi);
  //                i.className = 'fas fa-times';
  li.appendChild(i);

  input.value = "";
});

   var remove = document.getElementsByClassName("fas fa-times");
for (var i = 0; i < remove.length; i++) {
 remove[i].addEventListener('click',removeLi);
}

function removeLi() {
  this.parentElement.remove();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <div class="wrapper">
    <div class="to-do-container">
      <div class="input-data">
        <input id="new-task" type="text">
        <button id="add-button" type="button">Add</button>
      </div>
      <ul id="tasks">
        <li class="remove-list">Zadzwonić do...<i id="fas" class="fas fa-times"></i></li>
        <li class="remove-list">Odebrać dzieci z...<i class="fas fa-times"></i></li>
        <li class="remove-list">Kupić na obiad...<i class="fas fa-times"></i></li>
        <li class="remove-list">Umówić się na...<i class="fas fa-times"></i></li>        
      </ul>
    </div>
  </div>
</body>

</html>

如何删除单击Java脚本中<i>元素的<li>元素？

1 个答案: