Javascript-форум - Как при нажатии кнопки удалить ещё и внешний блок?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как при нажатии кнопки удалить ещё и внешний блок? (https://javascript.ru/forum/misc/79547-kak-pri-nazhatii-knopki-udalit-eshhjo-i-vneshnijj-blok.html)

Как при нажатии кнопки удалить ещё и внешний блок?

Нашла в интернете код, который удаляет блоки div. При нажатии удаляется тот блок в который вложена кнопка удаление. У блока есть класс card, по нему и происходит удаление. Как сделать, чтобы при нажатии удалялся еще и внешний блок который не вложен в class card. Пример в коде. У блоков есть название текст 1, текст 2, текст 3 и текст 4. У внешних блоков тоже есть название текст 1_1, текст 1_2, текст 1_3, текст 1_4. Удаление по идеи должно происходить, таким образом “текст 1” = “текст 1_1” и т.д. Как это сделать. Вот весь код:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
body {
  display: flex;
}

.card {
  text-align: center;
  border: 1px solid #000;
  background: #ccc;
}

</style>
<script>
$(document).ready(function(e){


function removeElem(delElem, attribute, attributeName) {      

  if (!(delElem && attribute && attributeName)) return;
  return function(e) {
 
    let target = e.target;


    if (!(target.hasAttribute(attribute) ?
        (target.getAttribute(attribute) === attributeName ? true : false) : false)) return;
    let elem = target;
    

    while (target != this) {
      if (target.classList.contains(delElem)) {
        target.remove();
        return;
      }
      target = target.parentNode;
    }
    return;
  };
}


document.addEventListener("click", removeElem("card", "data-del", "delete"));
});
</script>

</head>
<body>
  <div>Текст 1_1</div>
  <div>Текст 1_2</div>
  <div>Текст 1_3</div>
  <div>Текст 1_4</div>
<div class="card show">
  <div class="card-body">
    <h5 class="card-title">Текст 1</h5>
    <button type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
  </div>
</div>
<div class="card show">
  <div class="card-body">
    <h5 class="card-title">Текст 2</h5>
    <button type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
  </div>
</div>
<div class="card show">
  <div class="card-body">
    <h5 class="card-title">Текст 3</h5>
    <button type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
  </div>
</div>
<div class="card show">
  <div class="card-body">
    <span class="separator mx-auto"></span>
    <h5 class="card-title">Текст 4</h5>
    <button type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
 </div>
</div>
</body>
</html>

Katy93,
класс текстовым блокам можно присвоить?

Да, конечно.

Katy93,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
body {
    display: flex;
}

.card {
    text-align: center;
    border: 1px solid #000;
    background: #ccc;
}

</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
 const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
     if(target = target.closest(selector)) fn(target)
 })
 const remove = del => {
 const card = del.closest(".card.show");
 const index = [...document.querySelectorAll(".card.show")].indexOf(card);
 card.remove();
 document.querySelectorAll(".txt")[index].remove();
 };
 on(document, "click", ".card.show [data-del]", remove);
  });
</script>
</head>
<body>
    <div class="txt">Текст 1_1</div>
    <div class="txt">Текст 1_2</div>
    <div class="txt">Текст 1_3</div>
    <div class="txt">Текст 1_4</div>
<div class="card show">
    <div class="card-body">
        <h5 class="card-title">Текст 1</h5>
        <button type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
    </div>
</div>
<div class="card show">
    <div class="card-body">
        <h5 class="card-title">Текст 2</h5>
        <button type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
    </div>
</div>
<div class="card show">
    <div class="card-body">
        <h5 class="card-title">Текст 3</h5>
        <button type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
    </div>
</div>
<div class="card show">
    <div class="card-body">
        <span class="separator mx-auto"></span>
        <h5 class="card-title">Текст 4</h5>
        <button type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
 </div>
</div>
</body>
</html>

Я проверила ваш пример, на Windows XP, с установленными последними версиями браузеров. Только на FireFox, работает нормально на Chrome и Opera не работает. Выдаёт ошибку:

Цитата:

Uncaught TypeError: (var)[Symbol.iterator] is not a function

.
Всё таки мне бы хотелось пример, который работал и под Windows XP. Операционка хоть и старая но по моей статистики вебвизор показывает, что ей до сих пор пользуются. Я решила пример вот так присвоив id как кнопки так и внешним блокам при нажатии поиск осуществляется по id, а потом удаляется.
Вот пример:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
body {
    display: flex;
}

.card {
  text-align: center;
  border: 1px solid #000;
  background: #ccc;
}

</style>
<script>
$(document).ready(function(e){


function removeElem(delElem, attribute, attributeName) {      

  if (!(delElem && attribute && attributeName)) return;
  return function(e) {
     
    let target = e.target;


    if (!(target.hasAttribute(attribute) ?
        (target.getAttribute(attribute) === attributeName ? true : false) : false)) return;
    let elem = target;
    

    while (target != this) {
      if (target.classList.contains(delElem)) {
        target.remove();
        document.getElementById(elem.getAttribute('id')).remove();
        return;
      }
      target = target.parentNode;
    }
    return;
  };
}




document.addEventListener("click", removeElem("card", "data-del", "delete"));
});

</script>

</head>
<body>
  <div id="test1">Текст 1_1</div>
  <div id="test2">Текст 1_2</div>
  <div id="test3">Текст 1_3</div>
  <div id="test4">Текст 1_4</div>
<div class="card show">
  <div class="card-body">
    <h5 class="card-title">Текст 1</h5>
    <button id="test1" type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
  </div>
</div>
<div class="card show">
  <div class="card-body">
    <h5 class="card-title">Текст 2</h5>
    <button id="test2" type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
  </div>
</div>
<div class="card show">
  <div class="card-body">
    <h5 class="card-title">Текст 3</h5>
    <button id="test3" type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
  </div>
</div>
<div class="card show">
  <div class="card-body">
    <span class="separator mx-auto"></span>
    <h5 class="card-title">Текст 4</h5>
    <button id="test4" type="button" class="btn btn-outline-secondary" data-del="delete">Удалить</button>
 </div>
</div>
</body>
</html>

Дело не в операционке, а в версиях браузеров.
Возьмите последние версии Хрома и Оперы

Но в ИЕ все это все равно работать не будет
Вот это ИЕ не возьмет
const card = del.closest(".card.show");
const index = [...document.querySelectorAll(".card.show")].indexOf(card);
card.remove();

Если очень надо, ищете полифилы.
По мне так очень странно писать код в расчете на ИЕ-6 и НетскейпНавигатор.

if (target.classList.contains(delElem)) Тоже не будет работать в ИЕ <10. А 10 и 11 нет в ХР