Question

尝试删除具有特定属性的父级的子级DIV元素。我完成了一半的工作，但是使用下面的代码，它找不到孩子

HTML

<div id="PremiumGiftContainer" class="PremiumGiftContainer">

     <div class='message' is-vip='false'>
      <p>FALSE</p>
    </div> 

    <div class='message'  is-vip='false'>
      <p>FALSE</p>
    </div>

    <div class='message'  is-vip='true'>
      <p>TRUE</p>
    </div>

</div>

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

JQUERY

$("button").on("click", function(){
  remove_element();
})

function remove_element(){

      $('#PremiumGiftContainer').children(function () {

        $("[is-vip]").each(function(){
          if($(this).attr('is-vip')=='true'){
            $(this).fadeOut();
          }
        });

      })
}

FIDDLE

如果我删除了 $（'＃PremiumGiftContainer'）。children ... 部分，它可以正常工作，但是我试图限制为找到正确的搜索而需要进行的搜索的范围开关。

我要实现的目标是什么？

Answer 1

children()不接受函数，它带有一个选择器。这样，您只需使用属性选择器，然后在结果元素上调用fadeOut()。

还请注意，您不应在元素上创建自己的非标准属性。如果要使用元素存储自定义数据，请使用data-*属性。

$("button").on("click", function() {
  remove_element();
})

function remove_element() {
  $('#PremiumGiftContainer').children('[data-is-vip="true"]').fadeOut();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PremiumGiftContainer" class="PremiumGiftContainer">
  <div class="message" data-is-vip="false">
    <p>FALSE</p>
  </div>
  <div class="message" data-is-vip="false">
    <p>FALSE</p>
  </div>
  <div class="message" data-is-vip="true">
    <p>TRUE</p>
  </div>
</div>

<button id="button">Remove</button>

Answer 2

可以使用一个attribute selector使用一个选择器完成

$('#PremiumGiftContainer > [is-vip=true]').fadeOut()

DEMO

删除具有已定义属性的子级-不起作用

2 个答案: