Генерация и удаление элементов из списка - PullRequest
Новая
       2

Генерация и удаление элементов из списка

0 голосов
/ 10 апреля 2019

Мне нужно сделать простой компонент, который генерирует список, содержащий 100 элементов. Каждый элемент должен содержать кнопку. Если пользователь нажимает кнопку, элемент удаляется из DOM. Кроме того, каждый 3-й элемент должен быть кликабельным. После щелчка необходимо вызвать какое-то действие, например, изменить его макет.

Я создал кнопку, которая генерирует список. Теперь у меня проблема с удалением элементов при нажатии на кнопку. 

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>

Ответы [ 2 ]

0 голосов
/ 10 апреля 2019

В данный момент вы присоединяете кнопку и элементы абзаца непосредственно к 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>
0 голосов
/ 10 апреля 2019

Вы можете назначить идентификатор каждому из элементов с помощью

element.setAttribute('id','button'+i); где i - счетчик цикла for

, а затем удалите кнопку с помощью JavaScript node.remove(button4);

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...