如果存在 child 和 class，则删除 parent div，而不删除其他实例

Question

我需要从 DOM 中删除一个 div 如果它有一个 child div 具有特定的 class 名称，而不删除 child div.

我尝试在 if/then 语句中使用 .remove()，但是当我这样做时，它仍然会删除目标 parent div 的所有实例，即使那些没有child.

parent和child-type-Bclass是自动生成的。

<div class="overall">
   <div class="parent">
      <div class="child-type-A">
         // stuff that can't be deleted
      </div>
   </div>
   <div class="parent">
      <div class="child-type-B">
         // more stuff
      </div>
   </div>
   <div class="parent">
      <div class="child-type-B">
         // even more stuff
      </div>
   </div>
</div>

如果 child 有 class child-type-A，我想删除整个 parent div，所以它看起来像这样：

<div class="overall">
   <div class="child-type-A">
      // stuff that can't be deleted
   </div>
   <div class="parent">
      <div class="child-type-B">
         // more stuff that can't be deleted
      </div>
   </div>
   <div class="parent">
      <div class="child-type-B">
         // even more stuff that can't be deleted
      </div>
   </div>
</div>

这是我认为可行的 jQuery，但它不起作用（如果存在 child-type-A，它会删除所有 parents 和 children）。 =17=]

if( '.parent > .child-type-A' ) {
 $( 'parent' ).remove();
}

我预计 'if' 所针对的 div 将是唯一受影响的 div，有没有办法做到这一点？

Answer 1

你需要这样做：-

$(document).ready(function(){
  $( '.child-type-A' ).closest('.parent').replaceWith($( '.child-type-A' ).closest('.parent').contents());
  //you can do this one also
   //$( '.child-type-A' ).parent('.parent').replaceWith($( '.child-type-A' ).parent('.parent').contents());
});

工作片段：-

$(document).ready(function(){
  $( '.child-type-A' ).closest('.parent').replaceWith($( '.child-type-A' ).closest('.parent').contents());
  //you can do this one also
   //$( '.child-type-A' ).parent('.parent').replaceWith($( '.child-type-A' ).parent('.parent').contents());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overall">
   <div class="parent">
      <div class="child-type-A">
         // stuff that can't be deleted
      </div>
   </div>
   <div class="parent">
      <div class="child-type-B">
         // more stuff
      </div>
   </div>
   <div class="parent">
      <div class="child-type-B">
         // even more stuff
      </div>
   </div>
</div>

万一 child-type-A div 出现在 overall div:-

$(document).ready(function(){
  $('.parent').each(function(){
    if($(this).children('div').hasClass('child-type-A')){
      $(this).replaceWith($(this).contents());
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overall">
   <div class="parent">
      <div class="child-type-A">
         // stuff that can't be deleted
      </div>
   </div>
   <div class="parent">
      <div class="child-type-B">
         // more stuff
      </div>
   </div>
   <div class="parent">
      <div class="child-type-B">
         // even more stuff
      </div>
   </div>
   <div class="parent">
      <div class="child-type-A">
         // some other stuff
      </div>
   </div>
</div>

如果存在 child 和 class，则删除 parent div，而不删除其他实例

Delete parent div if child with class is present, without deleting other instances

html

jquery

web-frontend