Проблема с Dom-событием в массиве кнопок - PullRequest
Новая
       4

Проблема с Dom-событием в массиве кнопок

0 голосов
/ 12 октября 2019

Я пытаюсь создать визуальный элемент, в котором вы можете добавить и удалить 2 поля ввода и элемент ap, пока я нашел способ сделать это, удаляя их не в хронологическом порядке, последний div не будет удален и напечатает меня "не могу удалить undefied "

Я пытался сделать это несколькими способами: через функцию if, через методы массива и т. д. ... всегда одна и та же проблема

, поэтому код HTML работает следующим образом 

<main id="mainBlock">
        <div class="divBlock">
                <input class="name" type="text">
                <input class="workingHours" type="text">
                <p class="money"></p>
                <button class="deleteButton">delete</button>
        </div>
        <button id="addButton">add</button>     
</main>

и js: 

let addButton = document.getElementById('addButton');
let allDivs = document.getElementsByClassName('divBloc');
addButton.onclick = function(){
    let deleteButtons = document.querySelectorAll('button.deleteButton');
    let allDeleteButtonsArr = Array.from(allDeleteButtons)


    allDeleteButtonsArr.forEach(item => {
        item.onclick = function(){
           let indexNumber = allDeleteButtonsArr.indexOf(item);
           allDivs[indexNumber].remove();
        };
    });

Я думаю, что я должен объяснить, пока функция onclick сначала связана с кнопкой создания. Чтобы вам было легче читать, я удаляю всю часть, где я создаю все новые элементы p div и input, когда вы нажимаете на нее. потому что каждый раз, когда вы нажимаете на элемент добавления, появляется новый индексный номер, я думал, что будет лучше включить его в функцию addButton onclick.

Заранее спасибо:)

1 Ответ

0 голосов
/ 12 октября 2019

Поскольку вы динамически добавляете узлы, а затем хотите удалить их, добавление / удаление обработчиков событий для кнопки удаления может быть очень раздражающим.

Лучший способ - использовать делегирование событий, добавив прослушиватель событий в контейнер #mainBlock и, когда он вызывается, проверить, была ли вызвана кнопка удаления, и, если это так, удалить ее родитель. 

const item = `
  <div class="divBlock">
    <input class="name" type="text">
    <input class="workingHours" type="text">
    <p class="money"></p>
    <button class="deleteButton">delete</button>
  </div>
`;

const container = document.querySelector('#mainBlock');
const addButton = document.querySelector('#addButton');

addButton.addEventListener('click', () => {
  addButton.insertAdjacentHTML('beforebegin', item);
});

container.addEventListener('click', e => {
  if(!e.target.matches('.deleteButton')) return;
  
  e.target.parentNode.remove();
});
<main id="mainBlock">
  <button id="addButton">add</button>
</main>
...