Есть ли способ просто удалить элемент, если у него нет конечных братьев и сестер?

#html #jquery

#HTML #jquery

Вопрос:

Мне было интересно, есть ли способ просто удалить <h2> элемент внутри элемента с определенным классом, если у этого элемента нет других элементов, следующих за ним. Например, если у меня есть только следующее:

HTML:

 <div class="test">
    <h2>Test</h2>
</h2>

Я хочу просто удалить <h2>Test</h2> , но сохранить элемент div.

jQuery:

 $(".test").each(function() {
   if($(this).children().length == 0) {
     $(this).remove();
   }
});

Ответ №1:

Вы можете использовать filter() для выбора только тех .test > h2 элементов, у которых нет следующих братьев и сестер, а затем удалить их:

 $(".test > h2").filter((i, el) => $(el).next().length == 0).remove();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <h2>This will be removed</h2>
</div>
<div class="test">
  <p>Lorem ipsum</p>
  <h2>This will also be removed</h2>
</div>
<div class="test">
  <p>Dolor sit</p>
  <h2>This will NOT be removed</h2>
  <p>Amet consectetur</p>
</div>

Развернуть фрагмент

Ответ №2:

Используется find для поиска дочерних элементов.

Ваше текущее состояние не позволит вам удалить его, поскольку вы проверяете, нет ли дочерних элементов. В вашем случае были бы дочерние элементы.

 $(".test").each(function() {
   const h2 = $(this).find('h2');
   if(h2.siblings().length === 0) { //check for siblings
     h2.remove()
   }
});

Ответ №3:

Если <h2> это всегда ваши первые дочерние элементы, вы можете использовать $(".test:not(:has(> h2 *))").empty();

 $(".test:not(:has(> h2   *))").empty();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <h2>Dosen't Have sibilings</h2>
</div>
<div class="test">
  <h2>Has sibilings</h2>
  <p>Amet consectetur</p>
</div>

Развернуть фрагмент