0 
<!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 时消失。但代码无法正常工作。

4

2 回答 2

0

这是你想要做的吗？

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>

于 2020-04-15T23:33:52.913 回答
0

1) querySelectorAll 函数返回一个匹配的 DOM 元素的NodeList。请注意，节点列表就像一个数组，您可以使用 forEach 对其进行迭代，但它不是数组。2) removeChild函数以一个 dom 元素为参数。你所拥有的是一个字符串，它恰好与你的变量名具有相同的内容。

尽管正如我所提到的，您可以使用 forEach 遍历 NodeList，但我将只使用老式的 for 循环。

请注意，我还为您的按钮添加了一个单击处理程序，以将文本框中的文本作为新名称附加到列表末尾。

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>

于 2020-04-16T00:11:49.383 回答