Нашла в интернете код, который удаляет блоки 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>