-2
我想让我添加到每个li元素的删除按钮删除他表示的确切元素。 我的代码只删除父节点的第一个子节点。 我希望你们明白我想要什么:)我想，当我按删除按钮删除delet按钮代表的元素。
window.onload = function(){
document.getElementById("form").onsubmit = addElementsToList;
//creating the function that adds elements to the unordered list
function addElementsToList() {
var liElements = document.createElement("LI");
var textNode = document.createTextNode(document.getElementById('text').value);
var input = document.createElement("INPUT");
var button = document.createElement("INPUT");
button.setAttribute("type", "button");
input.setAttribute("type", "checkbox");
liElements.className = "li";
input.className = "checkbox";
button.value = "Delete";
button.className = "btn";
var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length - 1; i++) {
btn[i].id = "btn";
}
console.log(btn);
console.log(btn.length)
liElements.appendChild(textNode);
liElements.appendChild(input);
liElements.appendChild(button);
var paragraph1 = document.getElementById("elements").firstChild;
document.getElementById("elements").insertBefore(liElements,paragraph1);
//toggle done class
var elementClasses = liElements.classList;
function onCheckBoxChange() {
liElements.addEventListener("change", function() {
liElements.classList.toggle("done");
});
}
button.onclick = removeElement;
//function that removes the element
function removeElement() {
var list = document.getElementById('elements');
list.removeChild(list.childNodes[0]);
}
onCheckBoxChange();
return false;
}
};body {
background: #f9bc02;
}
#container {
background: #fb9902;
width: 60%;
margin:20px auto;
overflow: auto;
padding: 20px;
}
#form {
background: #fb9902;
width: 50%;
margin:20px auto;
padding: 20px;
}
#text {
width:75%;
height:50px;
border:0;
border-radius: 15px;
background-color: #fff;
text-align: center;
}
#submit {
width:20%;
height:50px;
border: 0;
background-color: #fff;
border-radius: 15px;
cursor:pointer;
}
#ul_elements {
background: #fb9902;
width: 50%;
margin:20px auto;
padding: 20px;
}
header {
text-align: center;
margin: 0 auto;
}
li {
text-align: left;
display: block;
}
.li{
color:#fff;
text-align: left;
font-size: 35px;
font-weight: bolder;
max-width: 65%;
padding-top: 10px;
padding-bottom: 10px;
}
.checkbox {
width:30px;
height:30px;
position: absolute;
left:60%;
}
.done {
color:green;
text-decoration: line-through;
}<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>ToDoList_2</title>
<meta charset="UTF-8">
<script src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<body>
<div id="container">
<header>
<h1>To do list</h1>
</header>
<form id="form">
<input type="text" id="text" value="Type here!" class="input">
<input type="submit" value="Submit" id="submit" class="input">
</form>
<div id="ul_elements">
<ul id="elements">
</ul>
</div>
</div>
</body>
</html>
这只是一些我tryed，忽略它:) 'button.className = “BTN”; var btn = document.getElementsByClassName（“btn”）; for（var i = 0; i