2

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

<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).

2 ответа 2

2

Есть вариант на чистом 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>

6
  • Такой вопрос, а можно это сделать проще? При клике на div с классом name, я удаляю от этого div до следующего div с классом name? Надеюсь я понятно выразился)
    – Konstantin
    31 мая 2020 в 15:33
  • Проще - это слишком абстрактное понятие. В чем сложность в этом решении и что вы хотите упростить?
    – Yugofx
    31 мая 2020 в 15:48
  • Извините, имел в в виду, чтобы покомпактнее было, наглеть не буду и так помогли. Спасибо вам.
    – Konstantin
    31 мая 2020 в 16:01
  • 1
    @Konstantin Всё равно, если оно оформлено в виде функции, любой её вызов = одна простая строчка) Вызывая функцию важно толко знать, что она делает... не так важно, как она устроена внутри) 31 мая 2020 в 16:15
  • 1
    Внутри функция тоже ничего сложного не делает, просто обращается к следующему элементу и спрашивает, подходит ли он под критерий остановки цикла. Если нет, то удаляет. Счётчик только для информации, сколько элементов было удалено. DOM Api в принципе очень многословная штука)
    – Yugofx
    31 мая 2020 в 16:34
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-элемент.

1
  • Спасибо, все работает и все понятно. Хотел компактней сделать сам, но не вышло и не правильно работало, благодарю.
    – Konstantin
    31 мая 2020 в 15:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.