jquery, удалить контент от одного тега до следующего

Question

Я имею ввиду, что у нас есть:

<div class="name">От этого div(a)</div>
<p>Это должно уйти</p>
<b>Это должно уйти</b>
<small>Это должно уйти</small>
<div class="name">До этого div(a)</div>
<div class="name">Див</div>
<div class="name">Див</div>

То есть удалить должен в данном случае 3 тега (p, b , small).

Answer 1

Есть вариант на чистом JS. Можно завернуть в jQuery объект при желании.

function spliceNodes(classFrom, classTo) {
  if (classTo === undefined) {
    classTo = classFrom;
  }
  let count = 0;
  const item = document.querySelector(`.${classFrom}`);
  while (item.nextElementSibling !== null && !item.nextElementSibling.classList.contains(classTo)) {
    count++;
    item.nextElementSibling.remove();
  }
  
  console.log(`Removed ${count} nodes`);
}

spliceNodes('name');

<div class="name">От этого div(a)</div>
<p>Это должно уйти</p>
<b>Это должно уйти</b>
<small>Это должно уйти</small>
<div class="name">До этого div(a)</div>
<div class="name">Див</div>
<div class="name">Див</div>

Answer 2

let from = $(".name").eq(0);
let to = $(".name").eq(1);

removeBetween(from, to);

function removeBetween($from, $to) {
  let $curr = $from.next();
  while( $curr.length && ($curr[0] !== $to[0]) ) {
    $curr.remove();
    $curr = $from.next();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">От этого div(a)</div>
<p>Это должно уйти</p>
<b>Это должно уйти</b>
<small>Это должно уйти</small>
<div class="name">До этого div(a)</div>
<div class="name">Див</div>
<div class="name">Див</div>

P.s. Проверка $curr !== $to не сработает, потому что даже если они будут хранить ссылки на одинаковые элементы, это всё еще разные объекты. Поэтому $curr[0] !== $to[0] отдельно достаются первые элементы списка и сравниваются. Они уже могут быть равны, если ссылаются на один и тот же HTML-элемент.

БЛОГ НА HUSL

jquery, удалить контент от одного тега до следующего

Ответы (2 шт):