<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" class="input">
<ul class="list">
<li class="lies" name="lies" >Adem</li>
<li class="lies" name="lies" >Adem1</li>
<li class="lies" name="lies" >Adem2</li>
<li class="lies" name="lies" >Adem3</li>
<li class="lies" name="lies" >Adem4</li>
</ul>
<button class="button">Add name</button>
<script>
const listChild = document.querySelectorAll('.lies');
listChild.addEventListener('click', () => {
listChild.parentNode.removeChild('listChild');
});
</script>
</body>
</html>
（（我只知道HTML，css和javascript。所以请不要尝试用jquery回答。我不会得到它）我想当我单击li * s时消失。但是代码无法正常工作。
const listChildren = document.querySelectorAll('.lies');
listChildren.forEach(function(listChild){
listChild.addEventListener('click',function(event){
event.target.parentNode.removeChild(event.target);
});
});<input type="text" class="input">
<ul class="list">
<li class="lies" name="lies" >Adem</li>
<li class="lies" name="lies" >Adem1</li>
<li class="lies" name="lies" >Adem2</li>
<li class="lies" name="lies" >Adem3</li>
<li class="lies" name="lies" >Adem4</li>
</ul>
<button class="button">Add name</button>请注意，我还为您的按钮添加了一个单击处理程序，以将新框中的文本作为新名称添加到列表的末尾。
const listChildren = document.querySelectorAll('.lies');
for (let i = 0; i < listChildren.length; i++) {
let item = listChildren[i];
item.addEventListener('click', () => {
item.parentNode.removeChild(item);
});
}
let itemList = document.querySelector('.list');
let addNameBtn = document.querySelector('button');
addNameBtn.addEventListener('click', () => {
let newNameNode = document.querySelector('.input');
let newName = newNameNode.value;
// only continue if there is text in the input box (i.e. don't allow adding blank names)
if(newName && newName != ''){
// creast ethe new li dom element to hold the name and set the class and name
var li=document.createElement('li');
li.innerHTML = newName
li.className = "lies";
li.name = "lies";
// register click handler
li.addEventListener('click', () => {
li.parentNode.removeChild(li);
});
//Append the new name to the list.
itemList.appendChild(li);
// blank out the input to allow fo rentry of the next name
newNameNode.value = "";
}
});<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" class="input">
<ul class="list">
<li class="lies" name="lies" >Adem</li>
<li class="lies" name="lies" >Adem1</li>
<li class="lies" name="lies" >Adem2</li>
<li class="lies" name="lies" >Adem3</li>
<li class="lies" name="lies" >Adem4</li>
</ul>
<button class="button">Add name</button>
</body>
</html>