javascript - 删除具有定义属性的 child - 不起作用

Question

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

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>