如果存在具有类的子元素，则删除父 div，而不删除其他实例

Question

如果 DOM 有一个具有特定类名的子 div，我需要从 DOM 中删除一个 div，而不删除子 div。

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

父类和子B类是自动生成的。

<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 child-type-A，我想删除整个父 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，它会删除所有父母和孩子）。

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());
});

工作 sn-p:-

$(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>

如果overall div 中存在多个child-type-A 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>