时间戳

首页 > 解决方案 > 如何通过向下遍历找到与类最近的 div？

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

问题描述

在这里，我试图向下遍历并删除最近的 div 类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>

标签： javascripthtmljqueryjquery-selectors

解决方案

您可以这样做，删除父级（以下 div2）之后的 div，然后删除父级（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>

推荐阅读