如何在单击按钮时删除特定数量的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文件进行更改，例如：

将您的div.

• Surround元素替换为button，并在容器

• 中应用与包装器input单独行相同的样式，单击单击从其中单击

按钮的容器

例如：

$("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>

​