如何通过向下遍历找到与类最近的 div？答案

【问题标题】：How to find the closest div with class by travesering down?如何通过向下遍历找到与类最近的 div？
【发布时间】：2021-11-04 22:50:33
【问题描述】：

在这里，我试图向下遍历并删除最近的具有div2 类的 div，但它无法正常工作。

问题是如果我点击随机取消按钮，例如最后点击取消按钮。

 $(document).on("click", ".cancel", function () {
   $('.div').find('.div2').first().remove();
   $(this).closest('.div1').remove();
   
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
   <div class="div1">
   <button class="cancel" type="button">Cancel</button> 
   </div>
   <div class="div2">
   <p>hello</p> 
   </div>

   <div class="div1">
   <button class="cancel" type="button">Cancel</button> 
   </div>
   <div class="div2">
   <p>hello2</p> 
   </div>

   <div class="div1">
   <button class="cancel" type="button">Cancel</button> 
   </div>
   <div class="div2">
   <p>hello3</p> 
   </div>

    <div class="div1">
   <button class="cancel" type="button">Cancel</button> 
   </div>
   <div class="div2">
   <p>hello4</p> 
   </div>

</div>

【问题讨论】：

标签： javascript html jquery jquery-selectors

【解决方案1】：

你可以这样做，删除父级之后的div（以下div2），然后删除父级（div1）

$(document).on("click", ".cancel", function() {
  let $_parent = $(this).parent();
  $_parent.next('div').remove();
  $_parent.remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
  <div class="div1">
    <button class="cancel" type="button">Cancel</button>
  </div>
  <div class="div2">
    <p>hello</p>
  </div>

  <div class="div1">
    <button class="cancel" type="button">Cancel</button>
  </div>
  <div class="div2">
    <p>hello2</p>
  </div>

  <div class="div1">
    <button class="cancel" type="button">Cancel</button>
  </div>
  <div class="div2">
    <p>hello3</p>
  </div>

  <div class="div1">
    <button class="cancel" type="button">Cancel</button>
  </div>
  <div class="div2">
    <p>hello4</p>
  </div>

</div>

【讨论】：