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>