1

Нужно очистить содержимое родительского класса после определенного класса:

<div class="widthCat">
    <div class="imgPopuar"><div class="flag-box">
            <a href="href">
                <img src="link" alt="text" width="150" height="100"></a>

        </div></div>
    <div class="titlePopularProduct">
        <a href="href" title="title">
            text</a>
    </div>
    <div class="contentPopuar">2013 год, 85 тыс. км<br>
        Рустави</div>
    <div class="priceRecom"><strong>25000$</strong></div>
    тел. +995597118849
    <div class="clr"></div>
</div>

Это спарсенный див блок поэтому к элементам нет доступа. Надо при помощи js или jquery "убрать" все что идет после класса priceRecom т.е на выходе получить

<div class="widthCat">
        <div class="imgPopuar"><div class="flag-box">
                <a href="href">
                    <img src="link" alt="text" width="150" height="100"></a>

            </div></div>
        <div class="titlePopularProduct">
            <a href="href" title="title">
                text</a>
        </div>
        <div class="contentPopuar">2013 год, 85 тыс. км<br>
            Рустави</div>
        <div class="priceRecom"><strong>25000$</strong></div>
    </div>
1
  • Можно использовать .nextAll(), но оно не удалит простой текст. Т.е. нужно будет добавить удаление обычного текста.
    – entithat
    30 авг 2018 в 9:07

2 ответа 2

4

Метод .nextAll() удалит все элементы после блока с классом priceRecom, но оставит обычный текст, т.е. номер телефона. Поэтому нам надо удалить его с помощью фильтра, который будет находить текст и удалять его. Конкретно строка this.nodeType == 3, где 3 - значение TEXT_NODE.

$('.priceRecom').nextAll().remove(); // Удалит всё после блока с классов, но останется телефон
$('.widthCat').contents().filter(function() {
  return (this.nodeType == 3); // Поэтому берём родительский блок и удаляем всё, что текст
}).remove();

console.log($('.widthCat').html()); // Просматриваем результат
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="widthCat">
  <div class="imgPopuar">
    <div class="flag-box">
      <a href="href">Image</a>
    </div>
  </div>
  тел. +9807829304
  <div class="titlePopularProduct">
    <a href="href" title="title">text</a>
  </div>
  <div class="contentPopuar">2013 год, 85 тыс. км <br> Рустави</div>
  <div class="priceRecom">
    <strong>25000$</strong>
  </div>
  тел. +995597118849
  <div class="clr">Текст</div>
</div>

UPD

В первом примере есть недоработка. Если перед блоком с нужным классом будет какой-либо текст без тега, то он тоже буде удалён. Так вот, следуя этому примеру, мы обёртываем простой текст в span и потом проходим по всем тегам и удаляем лишние.

// Находим текст без тегов и добавляем обёртку span
$('.widthCat').contents().filter(function() {
  return this.nodeType === 3;
}).wrap("<span></span>"); 

// Проходим по следующих тегах и удаляем (после класса priceRecom)
$('.priceRecom').nextAll().remove();

// Находим снова все span, и удаляем тег, оставляя его текст
$('.widthCat').find('span').contents().unwrap();

console.log($('.widthCat').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="widthCat">
  <div class="imgPopuar">
    <div class="flag-box">
      <a href="href">Image</a>
    </div>
  </div>
  тел. +995597118849
  <div class="titlePopularProduct">
    <a href="href" title="title">text</a>
  </div>
  <div class="contentPopuar">2013 год, 85 тыс. км <br> Рустави</div>
  <div class="priceRecom">
    <strong>25000$</strong>
  </div>
  тел. +995597118849
  <div class="clr">Текст</div>
</div>

0

Вот так можно удалить все элементы после priceRecom.

$(document).ready(function() {
  $('.priceRecom').nextAll().remove();
  var text = $('.widthCat').html();
  $('.widthCat').html(text.replace(/\тел. [+]\d+/g, ''))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widthCat">
  <div class="imgPopuar">
    <div class="flag-box">
      <a href="href">
        <img src="link" alt="text" width="150" height="100"></a>

    </div>
  </div>
  <div class="titlePopularProduct">
    <a href="href" title="title">
            text</a>
  </div>
  <div class="contentPopuar">2013 год, 85 тыс. км<br> Рустави
  </div>
  <div class="priceRecom"><strong>25000$</strong></div>
  тел. +995597118849
  <div class="clr">removed element 1</div>
  <div class="clr">removed element 2</div>
  <div class="clr">removed element 3</div>
  <div class="clr">removed element 4</div>
  <div class="clr">removed element 5</div>
</div>
<div class="clr">New content</div>

4
  • 2
    Но телефон остался..
    – entithat
    30 авг 2018 в 9:16
  • На счёт правки. Не сказал бы, что это вариант, так как где-то перед блоком с нужным классом может быть ещё один телефон и тогда его тоже заменит..
    – entithat
    30 авг 2018 в 9:58
  • @entithat вообще я считаю что текст без тега это не нормально. По нормальному задачу я выполнил как просил человек. Ваш this.nodeType == 3 удалит вообще все что не попадет в теги, т.е. текст. Так что тот же текст с телефоном который может в случае добавится без тега тоже удалится.
    – Puvvl
    30 авг 2018 в 10:03
  • Ну да, частично Вы правы)) Сейчас исправлю
    – entithat
    30 авг 2018 в 10:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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