Как изменить исходный массив элементов в Dom после прохода foreach

Рейтинг: 0Ответов: 1Опубликовано: 27.04.2023

Стоит такая задача. По клику на кнопку удалить родительский элемент той кнопки, по которой кликнули, а так же элемент из другого массива элементов Dom дерева, с индексом равным индексу кнопки, по которой кликнули. В цикле foreach вешаю событие и удаляю по index, но после первого удаления, index элемента в Dom дереве перестраивается, а в цикле foreach массив остается тот же. Как это обойти, подскажите пожалуйста. Возможно есть какой-то другой алгоритм действий.

function deleteRowFilter() {
    let btn = document.querySelectorAll('.company-sl-item__delete') // массив с кнопками

    btn.forEach(function (item, index, array) {
      item.addEventListener('click', function () {
        document.querySelectorAll('.company-sl .swiper-wrapper .swiper-slide')[index].remove(); // массив других элементов dom которые нужно удалить
        btn = document.querySelectorAll('.company-sl-item__delete')
      })
    })
  }

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

По клику на кнопку удалить родительский элемент той кнопки, по которой кликнули, а так же элемент из другого массива элементов Dom дерева, с индексом равным индексу кнопки, по которой кликнули.

html ты не предоставил... Поэтому сделаю свой, чисто схематично.

const ob = document.querySelector('.del')
const oi = document.querySelector('.inf')
ob.addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'BUTTON') return
  const i = [...ob.querySelectorAll('button')].findIndex(v => v === o)
  oi.querySelectorAll('p')[i].remove()
  o.closest('div').remove()
})
<div class='del'>
  <div>
    <p>Txt 1</p>
    <button>Del 1</button>
  </div>
  <div>
    <p>Txt 2</p>
    <button>Del 2</button>
  </div>
  <div>
    <p>Txt 3</p>
    <button>Del 3</button>
  </div>
  <div>
    <p>Txt 4</p>
    <button>Del 4</button>
  </div>
  <div>
    <p>Txt 5</p>
    <button>Del 5</button>
  </div>
  <div>
    <p>Txt 6</p>
    <button>Del 6</button>
  </div>
</div>
<div class='inf'>
  <p>Info 1</p>
  <p>Info 2</p>
  <p>Info 3</p>
  <p>Info 4</p>
  <p>Info 5</p>
  <p>Info 6</p>
</div>