Я проверила ваш пример, на 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>