时间戳

首页 > 解决方案 > 如何使用“包含”中的变量使用 jQuery 选择元素并使用类 Foo 删除最近的 el

javascript - 如何使用“包含”中的变量使用 jQuery 选择元素并使用类 Foo 删除最近的 el

问题描述

我正在尝试使用选择器中的变量来选择一个元素，以使用 class 删除最近的元素flag-container。但是，当我触发该功能时，该元素不会被删除。

function remove_div() {
    let comment_pk = 1
    $("div:contains('" + comment_pk + "')").closest('.flag-container').remove()
}

$('#trigger').click(function() {
    remove_div()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div hidden class="comment-pk">1</div>
<div class="drilled-hierarchy">
   <div class="flag-container">
      To be removed
   </div>
</div>


<button id="trigger"> Remove </button>

标签： javascriptjquery

解决方案

您的逻辑中的问题是沿着祖先元素向上closest()传播DOM 。您要定位的 是原始 的兄弟姐妹的孩子。.flag-containerdiv

因此，您可以使用next()*find()代替：

function remove_div() {
  let comment_pk = 1
  $("div:contains('" + comment_pk + "')").next('.drilled-hierarchy').find('.flag-container').remove()
}

$('#trigger').click(function() {
  remove_div()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div hidden class="comment-pk">1</div>
<div class="drilled-hierarchy">
  <div class="flag-container">
    To be removed
  </div>
</div>


<button id="trigger">Remove</button>

*在这种情况下，在调用中使用选择器字符串参数next()是可选的，但以后会保存意外的错误。siblings()根据您的确切用例，也可能是合适的。

推荐阅读