如何在單擊按鈕時刪除特定數量的 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>