Как удалить при нажатии кнопки блок с одинаковым классом на JavaScript?

Dima83

Новичок
У меня есть три блока. Как удалить блок с классом test_ct_1_1 нажав кнопку button c классом delete_ct_1_1. Нужно удалить блок ориентируясь только на последнюю часть класса ct_1_1. Соответственно тоже самое сравнивая класс у кнопки и контейнера ct_1_2 и ct_1_3. Как это можно сделать на JavaScript ? Вот html пример:
HTML:
<div class="test_ct_1_1" style="display: flex;">
  <div class="block1" style="background-color: rgb(210, 180, 140); width: 800px;">
    <p contenteditable="true" data-paragraph-index="0">Text1</p>
  </div>
  <div class="block2">
    <button class="delete_ct_1_1">X</button>
  </div>
</div>

<div class="test_ct_1_2" style="display: flex;">
  <div class="block1" style="background-color: rgb(210, 180, 140); width: 800px;">
    <p contenteditable="true" data-paragraph-index="1">Text2</p>
  </div>
  <div class="block2">
    <button class="delete_ct_1_2">X</button>
  </div>
</div>

<div class="test_ct_1_3" style="display: flex;">
  <div class="block1" style="background-color: rgb(210, 180, 140); width: 800px;">
    <p contenteditable="true" data-paragraph-index="2">Text3</p>
  </div>
  <div class="block2">
    <button class="delete_ct_1_3">X</button>
  </div>
</div>
 

AnrDaemon

Продвинутый новичок
Для этого надо добавить **отдельный** атрибут, объединяющий кнопку и элементы, которые ты хочешь удалить.
Тогда не придётся изобретать головожопые конструкции.
HTML:
<div data-name="del-1">…</div>
<div data-name="del-2">…</div>
<div data-name="del-1">…</div>
<button type="button" name="action" value="delete" data-name="del-1">Del 1</button>
<script>
document.querySelectorAll(`button[name="action"][value="delete"]`).forEach((el) => el.addEventListener('click', (e) => document.querySelectorAll(`div[data-name="${el.dataset.name}"]`).forEach((n) => n.remove())));
</script>
 
Сверху