как скрыть / удалить весь текст между двумя элементами?

#javascript #jquery

Вопрос:

допустим, у меня есть этот кусок HTML:

 <div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>

Что я хочу сделать с помощью jQuery / JavaScript, так это скрыть / удалить весь текст и элементы между <span class="title"> и <div class="image"> .

Я просмотрел все и почти ничего не нашел. Есть идеи о том, как я мог бы это сделать?

1. Это было бы намного проще, если бы удаляемый текст был заключен в HTML-теги…

2. @Widor у меня довольно большая база данных, которую мне нужно отредактировать, чтобы добавить теги. хотя я согласен.

Ответ №1:

Как насчет чего-то подобного? http://jsfiddle.net/ZW8q2/1

 var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);

1. Это здорово. однако именно то, что нужно, не скрывает разрывы строк, есть идеи о том, как обойти это?

2. Обновил мой ответ — jsfiddle.net/ZW8q2/1 — Вы можете добавить теги, которые хотите отфильтровать, разделяя их запятой в селекторе:not

Ответ №2:

Вы могли бы попробовать:

 var str = $('.container .title').text()   $('.container .image').html();
$('.container').html(str);

Скрипка JS.

Ответ №3:

Попробуйте это:

Поместите тег вокруг того, что вы хотите скрыть, дайте div имя идентификатора. Итак, в итоге ваш будет выглядеть так:

 <div id = "hideMe" style ="display:block">...Your Content...</div>

Используйте этот javascript:

     function hide()
    {
    document.getElementById('hideMe').style.display = "none";
    return;
    }

Вызывайте функцию Javascript всякий раз, когда вы хотите скрыть содержимое между div с помощью кнопки (или другого элемента управления), подобного этому:

 <input type= "submit" onclick ="hide()">