如何在单击按钮时删除特定数量的 DOM 元素？

Question

我试图弄清楚如何在单击按钮时删除按钮上方四个最近的 div 元素（以及包含按钮的 div）。 我一直在尝试使用.closest() ，但运气不佳。 我将始终按照 DOM 顺序删除按钮本身和按钮上方的四个元素。

下面的 div 有多组行，所以我不能单独按类选择这些元素。

示例 HTML：

//Row 1
<div class="col-2 selectedRow">014</div>
<div class="col-4 selectedRow">Test</div>
<div class="col-2 selectedRow">Special Charge</div>
<div class="col-2 selectedRow">012</div>
<div class="col-2 selectedRow"><input type="button" class="removeCode" value="Remove"></div>

//Row 2
<div class="col-2 selectedRow">012</div>
<div class="col-4 selectedRow">Test 2</div>
<div class="col-2 selectedRow">Other Charge</div>
<div class="col-2 selectedRow">011</div>
<div class="col-2 selectedRow"><input type="button" class="removeCode" value="Remove"></div>

Javascript：

$("form").on('click', '.removeCode', function (event) {
    //Remove the current div container, and the 4 divs above that element in the DOM order.
});

Answer 1

您需要对 HTML 文件进行更改，例如：

1. 用button替换input元素并应用与包装器div相同的样式。
2. 环绕容器中的单个行
3. 单击时删除单击按钮的容器

例如：

 $("form .removeCode").click(function(event) { $(this).parent(".container").remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class="container"> <div class="col-2 selectedRow">014</div> <div class="col-4 selectedRow">Test</div> <div class="col-2 selectedRow">Special Charge</div> <div class="col-2 selectedRow">012</div> <button type="button" class="col-2 selectedRow removeCode">Remove</button> </div> </div> <div class="container"> <div class="col-2 selectedRow">012</div> <div class="col-4 selectedRow">Test 2</div> <div class="col-2 selectedRow">Other Charge</div> <div class="col-2 selectedRow">011</div> <button type="button" class="col-2 selectedRow removeCode">Remove</button> </div> </form>