我仍在学习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时,有必要进行循环。预先感谢您的帮助。
答案 0 :(得分: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>