Question

我需要制作一个简单的组件，该组件生成包含100个元素的列表。每个元素应包含一个按钮。如果用户单击按钮，则该元素将从DOM中删除。此外，每三分之三的元素都应该是可点击的。单击后，应调用一些操作，例如更改其布局。

我创建了一个按钮，该按钮生成一个列表。现在，在单击按钮时，我无法删除元素。

let addButton = document.getElementById('btn');

addButton.addEventListener('click', function() {

  for (let i = 0; i < 100; i++) {


    let element = document.createElement("button");
    let textElement = document.createTextNode("Click");
    let classElement = document.createAttribute("class");

    classElement.value = "buttonClick";

    let paragraph = document.createElement("p");
    let textParagraph = document.createTextNode("List element");
    let classParagraph = document.createAttribute("class");

    classParagraph.value = "paragraphList"

    let number = i + 1;

    paragraph.innerText = "List element number " + number;
    element.innerText = "Click";

    addButton.appendChild(paragraph);
    addButton.appendChild(element);

  };
});


let buttonRemove = document.getElementsByClassName("buttonClick");

buttonRemove.addEventListener('click', function() {


});

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <button id="btn">Generate list</button>
  <script src="js/main.js"></script>

</body>
</html>

Answer 1

您可以使用以下方式为每个元素分配一个ID

element.setAttribute('id','button'+i); 我是for循环中的计数器

，然后使用javascript删除按钮 node.remove(button4);

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Answer 2

目前，您正在将按钮和段落元素直接附加到DOM。您应该将它们分组在div中，以便使用divName.addEventListener（“ click”，function）;使条目可单击。要选择每三个元素，可以使用模运算符％，它返回除法的余数。

let addButton = document.getElementById('btn');

addButton.addEventListener('click', function() {

  for (let i = 0; i < 100; i++) {

    let container = document.createElement("div");
    let element = document.createElement("button");
    let paragraph = document.createElement("p");

    let number = i + 1;

    paragraph.innerText = "List element number " + number;
    element.innerText = "Click";
    document.body.appendChild(container);
    container.appendChild(paragraph);
    container.appendChild(element);
    element.addEventListener("click", function(e) {
      e.target.parentElement.remove();
    });
    if (number % 3 == 0) {
      container.addEventListener("click", function(e) {
        console.log("one of those third elements");
      });
    }
  }
});

<button id="btn">Generate list</button>

从列表中生成和删除元素

2 个答案: