Javascript удалить часть страницы

Удаление html-элементов в JavaScript

В JavaScript можно создавать элементы с нуля и добавлять их в уже существующую html-разметку (см. статью «Создание html-элементов в JavaScript»). Однако нередко возникает вопрос — а как удалить уже существующие html-элементы? Давайте рассмотрим способы.

Удаление html-элементов методом removeChild()

Метод removeChild() существует достаточно давно, поэтому им стоит пользоваться там, где нужна поддержка старых браузеров. Однако с ним стоит быть внимательным, т.к. «удалить ребенка» (именно так переводится этот метод с английского) можно только у его родителя. Т.е. при использовании этого метода код будет такой:

Давайте рассмотрим удаление элементов на примере списка:

, а затем удалить дочерний узел с именно этим элементом ( removeChild(this) ). Для того чтобы убедиться, кто родитель, кто потомок, мы используем console.log() для просмотра элементов:

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3
• Элемент списка 4
• Элемент списка 5

Удаление методом remove()

По сравнению с removeChild() метод remove() прост и понятен:

Т.е. все, что вам нужно сделать — это обратиться к элементу и вызвать метод remove() . Рассмотрим его также на примере, в котором по клику будут исчезать однотипные html-блоки:

В этом примере использован метод setInterval() для формирования постепенного исчезновения блока.

Исчезающий блок 1

Исчезающий блок 2

Исчезающий блок 3

Исчезающий блок 4

Поскольку метод remove() относится к новому стандарту, он совсем не поддерживается в Internet Explorer (до 11 версии включительно), Opera Mini (она вообще мало, что поддерживает из новых стандартов), а в более прогрессивных Chrome & Firefox поддержка есть с 23 версии, в Opera — с 15, в Safari — с 7, т.е. примерно с 2012 года. Более полная информация — на сайте caniuse.com:

Для браузеров, не поддерживающих данный метод (и ряд других), можно использовать полифилы DOM4 или DOMShim.

Удаление всех элементов внутри родителя

или
с каким-либо id , но удалить все вложенные
. Для этого можно воспользоваться свойством innerHTML или innerText , или же textContent , присвоив в него пустую строку:

Этот способ сработает достаточно быстро, но в некоторых браузерах будет быстрее вариант с удалением всех узлов элемента при отслеживании наличия у него вложенных элементов-потомков, или детей. Это можно сделать несколькими способами:

Переменная node в приведенных примерах — это тот элемент (узел), в котором нужно удалить вложенные (дочерние) элементы.

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

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3
• Элемент списка 4
• Элемент списка 5

Удаление элементов в jQuery

В jQuery один элемент вы удаляете с помощью метода remove(), а для удаления всех вложенных элементов есть метод empty(). Само собой, что вы должны сначала подключить эту библиотеку, скачав ее на оффсайте или используя CDN. При использовании обоих методов все данные, включая обработчики событий, удаляются вместе с элементом.

Пример с использованием методов jQuery remove() и empty()

Давайте используем оба метода jQuery — remove() и empty() — в примере: при клике на любом из абзацев вы удаляете только этот абзац, при клике на кнопке — удаляете все содержимое .

Текст 1-го абзаца внутри div#myDiv

Текст 2-го абзаца внутри div#myDiv

Текст 3-го абзаца внутри div#myDiv

Метод jQuery elem.detach()

Можно также использовать метод detach(), который не удаляет данные и обработчики событий вместе с элементами. Он хорош в том случае, если вы планируете после каких-либо действий вернуть элементы на свое бывшее или в другое место. Например, мы можем перемещать ul между 2-мя блоками, используя метод detach() для удаления списка из первого элемента и метод appendTo() для добавления этого списка во второй блок. Удаленный список мы сохраняем в переменную, которую используем при добавлении списка во второй, а затем и в первый блок. При этом можно заметить, что при клике на элементах li нашего перемещаемого списка срабатывают собственные события клика, которые изменяют его внешний вид за счет добавления/удаления класса different .

Источник

Очистить HTML-страницу с помощью JavaScript

Есть ли способ удалить часть существующего контента на странице с помощью функции JavaScript?
Вот так:

Что я должен положить в ? Я знаю, что положить после того, как часть, которую я хочу отобразить, скроет конец страницы, но как очистить начало?

Нет, я хочу использовать html / javascript, чтобы стереть существующие элементы страницы. WOuld document.something = «»; Работа?

Почему именно вы пытаетесь стереть содержимое страницы. Трудно ответить на это максимально правильно, не зная никакой справочной информации. Хотя я думаю, что JQuery великолепен, я не думаю, что это решение, просто решение.

2 ответа

Вы можете использовать document.body.innerHTML = «» . Он будет вынимать все в теле, пока браузер обрабатывает страницу. См. Следующий пример:

  
This should not appear
  
This should appear.
   

Это, однако, не лучший способ добиться этого. Если вы хотите, чтобы какой-то текст был скрытым, рассмотрите jQuery, как упомянули другие.

Вы можете манипулировать атрибутами и элементами в javascript. Таким образом, вы знаете, что следующее будет отображать только текст the second part .

 
the first part
 
the second part
 

Чтобы динамически манипулировать этими разделами, вы можете вызвать функцию javascript, как показано ниже.

И, конечно, вы можете изменить это, чтобы сделать гораздо больше.

Ещё вопросы

• 1 Как применить scipy.stats.describe к каждой группе?
• 0 В выпадающем меню есть повторяющаяся проблема при выпадении
• 0 JQuery удалить класс и добавить в другой div не работает
• 0 Найдите поле ввода с определенным идентификатором и атрибутом обновления, используя jQuery
• 0 $ get property для службы $ http / $ resource?
• 0 Как извлечь информацию из одного файла и разделить информацию на четыре других файла?
• 1 Конструктор не определен, говорит Eclipse, но он определен (Java)
• 1 Jitpack Doent построить проект
• 0 плагин проверки jquery, условный удаленный вызов не работает должным образом
• 1 Следует ли усреднять метрики активных пользователей Firebase (DAU, WAU, MAU)?
• 1 Angular 2 ngStyle не может связать начало семейства шрифтов с числом
• 0 как скопировать div в некоторый div и удалить оригинальный div
• 1 Не могу запустить Анаконду из командной строки (или где-либо еще)
• 1 установка общего стиля кнопок для старых версий ОС
• 0 Переменная из углового шаблона отображается как неопределенная в контроллере
• 1 Не определено в Sails js «Неправильные атрибуты отправлены на неопределенное»
• 0 Перемещение данных таблицы MySQL в новую таблицу по расписанию
• 1 Батик — поместите SVG поверх изображения
• 1 Неверно отформатированный десятичный код дает неверную ошибку
• 1 Почему рисовать штриховые линии на холсте не работает?
• 1 Java: байт [1] против байта [1024]
• 0 Как читать символы из txt файла в 2d массив C ++
• 1 Почему Java Thread искажает печать на консоль [дубликаты]
• 0 Округление до 100 ед.
• 0 Исключить ограниченные функции из полученного объекта
• 0 Как я могу получить доступ к переменным в различных функциях JavaScript на той же фабрике?
• 0 Шрифт Google отображает поля в Internet Explorer 8 — IE 8
• 0 Как сохранить идентификатор выбранного выпадающего значения в SQLAlchemy
• 0 Скомпилировать функцию MATLAB во что-то, что можно запустить на терминале linux без MATLAB?
• 1 Как проверить значение в EditText со значением позиции текущего элемента в ViewPager с помощью наблюдателя?
• 1 Request.ServerVariables.AllKeys не содержит все ключи
• 0 Как выбрать, где внешний ключ не существует в других столбцах, и сравнить даты из таблиц, которые не связаны напрямую
• 1 Чтение определенного столбца из CSV с DictReader
• 1 как создать делегата на целевой класс
• 0 Таймер в AngularJS
• 0 Доступ к размеру элемента в векторе C ++
• 0 Как я могу использовать кнопку WindowsFormApplication для переключения между двумя приложениями Windows (заставить их наверх)?
• 0 (JS) вызывает внешнюю функцию .js с тегом
• 1 Цикл while для определения, является ли введенное значение двойным
• 1 Не удается найти символ
• 0 Angular.js 401 Неразрешенный код статуса
• 0 Директива AngularJS — Как я могу сказать, что выражение атрибута полностью оценено?
• 0 Как это работает сценарии JQuery для загрузки содержимого Grom AJAX?
• 1 getAdapter (). notifyDataSetChanged () не изменяет базу данных для повторного просмотра
• 0 Получить измененные поля
• 1 уменьшить значение translate-x
• 1 Сохранение объекта в базе данных приводит к следующему: «На объектный объект нельзя ссылаться несколькими экземплярами IEntityChangeTracker»
• 1 Как начать потоковое видео с помощью webRTC?
• 0 Загрузка изображений напрямую с сервера
• 0 как проверить, существует ли имя пользователя в angularjs

Источник

Удалить весь контент, используя чистый JS

Я ищу способ удалить весь контент веб-страницы, используя чистые библиотеки Javascript — no. Я пробовал:

document.documentElement.innerHTML = "whatever"; 

но это не работает: оно заменяет внутреннюю часть элемента . Я смотрю на замену всего документа, включая, если возможно, объявление doctype и

Для чего? Javascript работает на DOM, который является более высоким уровнем, чем базовая HTML-сериализация (т. Е. Где

@Yi Yi Jiang +1 за хорошее предложение (если вы хотите оставить его как ответ, я удалю свою правку :))

Я оплакиваю прохождение статической веб-страницы с соответствующей возможностью просматривать исходный код любой веб-страницы, чтобы понять, как она была построена и как все это работает.

9 ответов

Я думаю, что браузер по праву предполагает, что страница с типом контента text/html всегда будет веб-страницей, поэтому пока вы можете сделать что-то вроде.

У него все еще будет висящий HTML.

document.documentElement.innerHTML = ''; 

window.location = 'about:blank'; 

Это приведет вас к пустой странице — внутреннему механизму, предоставляемому большинством браузеров, которые я считаю.

Я считаю, что лучшим решением является использование document.open() , который очистит экран.

Первый обновленный ответ был половиной того, что я искал. Но я думаю, что изменение типа документа doctype слишком много .

@passcod После того, как вы также измените тип документа, вы измените то, как браузер будет отображать ваш HTML / CSS. Это, вероятно, повлечет за собой перезагрузку страницы. Я не думаю, что вы можете изменить тип документа на лету.

@alex, изменяющий window.location на about: blank, имеет проблему с IE10, особенно IE10, потому что некоторые дополнения при обнаружении about: blank page заполняют его своим содержимым

var i = document.childNodes.length - 1; while (i >= 0)

Удаляет все (doctype) также на FF 3.6, Chrome 3.195 и Safari 4.0. IE8 прерывается, так как ребенок хочет удалить родителя.

Повторное создание позже, также можно сделать следующим образом:

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

Согласно статье статьи Dotoro по методу document.clear, они (с тех пор, как устарели) рекомендуют вместо этого называть document.open , что очищает страницу, так как он запускает новый поток.

Таким образом, вы избегаете неприятного взлома about:blank .

После того, как страница уже полностью загружена:

document.write(''); document.close(); 

document.documentElement.innerHTML=''; document.open(); 

Метод Document.open() открывает документ для записи. если вы не используете открытый метод, вы не можете изменить документ после установки innerhtml на пустую строку

Я считаю, что это все равно оставит doctype node висящим, но:

Мне просто интересно, почему вы хотите это сделать. Теперь нет того, что я знаю, чтобы заменить абсолютно все до декларации doctype, но если вы хотите пойти на эти длины, то почему бы не перенаправить пользователя на специально созданную страницу с шаблоном, который вам нужен, с требуемым типом doctype, а затем заполнить там контент?

EDIT: в ответ на комментарий, что вы можете сделать, это удалить весь контент, а затем создать iframe, чтобы он заполнил всю страницу, а затем вы полностью контролируете содержимое. Имейте в виду, что это большой взлом и, вероятно, будет очень болезненным, но он будет работать:)

Всем, кто спрашивал причины . Это казалось простым способом вычеркнуть все и начать с нуля в пользовательском скрипте . Я могу включить любой код JS, какой захочу, и он будет работать на странице, а не в песочнице , Дело в doctype что я хочу использовать xhtml на веб-сайте html.

Источник