如何向下遍历找到与class最近的div？

Question

我在这里尝试向下遍历并删除最近的 div 和 class div2 但它无法正常工作。

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

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

Answer 1

你还不如这样，去掉parent后面的div（下面的div2），然后去掉parent（下面的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>

如何向下遍历找到与class最近的div？

How to find the closest div with class by travesering down?

html

javascript

jquery

jquery-selectors