Удалить родительский div, если присутствует дочерний класс, без удаления других экземпляров - PullRequest
Новая
       11

Удалить родительский div, если присутствует дочерний класс, без удаления других экземпляров

1 голос
/ 01 июня 2019

Мне нужно удалить div из DOM, если у него есть дочерний div с определенным именем класса, без удаления дочернего div.

Я пытался использовать .remove () в операторе if / then,но когда я это делаю, он все равно удаляет все экземпляры целевого родительского div, даже те, у которых нет дочернего элемента.

Классы parent и child-type-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>

Я хочу удалить весь родительский div, если у ребенка есть класс child-type-A, поэтому он выглядит так: 

<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, который я думал, будет работать, но это не так (онудаляет всех родителей и детей, если присутствует дочерний тип-A). 

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

Я ожидаю, что div, на который нацелено 'if', будет единственным затронутым div, есть ли способ сделать это

1 Ответ

1 голос
/ 01 июня 2019

Вам нужно сделать так: - 

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

В случае, если внутри 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>
...