Удаление тега/блока в jquery все способы
Удалить элемент в jquery , удаление элемента/тега/блока, при загрузке страницы, удалить элемент по нажатию кнопки! Сколько способов существует удалить элемент из дерева Dom?
Для использования ниже идущих скриптов понадобится подключить jquery
Подробно об удалении тегов/блоков/элементов в jquery
- Удаляем тег/блок/элемент с помощью jquery(empty)
- Удали тег/блок/элемент с помощью jquery(remove)
- Удали тег/блок/элемент с помощью jquery(detach)
- Удаляем тег/блок/элемент с помощью jquery(unwrap)
- Как удалить элемент при загрузке страницы jquery
- Как удалить тег/блок/элемент при клике на себя jquery
Удаляем тег/блок/элемент с помощью jquery(empty)
Метод "empty" в jquery удаляет все содержимое внутри тега. Все элементы, текст, в общем все, что есть внутри тега будет удалено!
Для того, чтобы весь процесс удаления не был скучным - сделаем его активным, для этого нам понадобится:
Нам нужно использовать один из способов...
Html код с тегами/элементами внутри другого тега, которые и будем удалять:
<div class="delitebyempty">
<p>Текст-1</p>
<p>Текст-2</p>
<p>Текст-3</p>
</div>
Далее нам понадобится кнопка... button, добавим туда onclick, повесим прямо на кнопку, с вызовом функцию(deliteElemetByEmpty), которая и удалит наши элементы/ теги в jquery:
Далее напишем функцию, которая и удалит наши элементы из дерева Dom:
<script>
function deliteElemetByEmpty() {
$('.delitebyempty').empty();
}
</script>
Соберем весь код удаления элемента в jquery с помощью empty
<div class="delitebyempty">
<p>Текст-1</p>
<p>Текст-2</p>
<p>Текст-3</p>
</div>
<button onclick="deliteElemetByEmpty();">Удали элемент в jquery с помощью empty</button>
<script>
function deliteElemetByEmpty() {
$('.delitebyempty').empty();
}
</script>
Результат удаления элемент в jquery с помощью empty
Разместим выше приведенный пример прямо здесь! И чтобы проверить, как будет удаляться теги - нажмите кнопку "Удали элемент в jquery с помощью empty"
Текст-1
Текст-2
Текст-3
Удали тег/блок/элемент с помощью jquery(remove)
Один из вариантов удаления элемента, тега, блока в дереве Dom - это использование метода remove.
Чем отличается remove и empty
Метод удаляет все элементы внутри тега/элемента, без удаления тега к которому обратились.
А remove удаляет и тег к которому обратились.
Результат удаления элемента в jquery с помощью remove
Для того, чтобы увидеть процесс удаления элемента нажми на кнопку: "Удали элемент в jquery с помощью remove"
Текст-1
Текст-2
Текст-3
Скрипт удаления элемента в jquery с помощью remove
<div class="kod">
<div id="delitelementbyremove">
<p>Текст-1</p>
<p>Текст-2</p>
<p>Текст-3</p>
</div>
</div>
<button onclick="deliteElemetByRemove();">Удали элемент в jquery с помощью remove</button>
<script>
function deliteElemetByRemove() {
$('#delitelementbyremove').remove();
}
</script>
Удали тег/блок/элемент с помощью jquery(detach)
Для того, чтобы удалить элемент в jquery с помощью detach нам опндаобится:
Будем для примера использовать тег input
Здесь...
Снова удалим элемент по нажатию на кнопку + onclick + функция :
Нам потребуется соответствующая функция...
<script>
function deliteElemetByDetach() {
$('input[name="delitelementbydetach"]').detach();
}
</script>
Соберем код удаления элемента jquery(detach)
<div class="kod">
<input name="delitelementbydetach" value="delitelementbydetach">
</div>
<button onclick="deliteElemetByDetach();">Удали элемент в jquery с помощью detach</button>
<script>
function deliteElemetByDetach() {
$('input[name="delitelementbydetach"]').detach();
}
</script>
Результат удаления элемента в jquery с помощью detach
Удаляем тег/блок/элемент с помощью jquery(unwrap)
В следующем примере удалим родительский элемент.
В нашем примере тег будет:
Для того, чтобы удалить родительский элемент, нам опять понадобится несколько элементов Dom
<div class=red>
<delbywrap>
<p>Текст-1</p>
<p>Текст-2</p>
<p>Текст-3</p>
</delbywrap>
</div>
Далее опять возьмем кнопку... навесим(опять на него онклик) с функцией:
<button onclick="deliteElemetByUnwrap();">Удали элемент в jquery с помощью unwrap</button>
Напишем функцию, которая удалит родительский элемент у тега "delbywrap"+ нам потребуется метод "unwrap"
<script>
function deliteElemetByUnwrap() {
$('delbywrap').unwrap();
}
</script>
Соберем код удаления родительского элемента с помощью jquery и unwrap
<div class=red>
<delbywrap>
<p>Текст-1</p>
<p>Текст-2</p>
<p>Текст-3</p>
</delbywrap>
</div>
<button onclick="deliteElemetByUnwrap();">Удали элемент в jquery с помощью unwrap</button>
<script>
function deliteElemetByUnwrap() {
$('delbywrap').unwrap();
}
</script>
Результат удаления родительского элемента с помощью jquery и unwrap
Чтобы посмотреть живой пример нажми на кнопку : "дали элемент в jquery с помощью unwrap"
Текст-1
Текст-2
Текст-3
Как удалить элемент при загрузке страницы jquery
Иногда требуется удалить элемент в момент загрузки страницы(всякое бывает 
)
Не будем делать какой-то сложный код, но и повторяться тоже не хочется ... используем двойной класс в теге:
Используем один из выше описанных методов...
Результат удаления блока при загрузке :
Естественно, что вы ничего не увидите, потому, что элемент был удален!
Это очередной, довольно простой пример!
Как удалить элемент при клике на себя jquery
Вроде бы перебрали множество вариантов.
Пожалуй рассмотрим ещё один из вариантов - это "удаление элемента при клике на себя!"
Проделаем все те же необходимые манипуляции, что удже выше повторили множество раз...
Создадим блок из div с атрибутом attribute style, где пропишем border:
Далее обработаем наше нажатие на себя и возьмем метод удаления элемента remove:
<script>
$( "#delite2" ).click(
function()
{
this.remove();
});
</script>
Живой пример удаления элемента при нажатии на себя
Чтобы увидеть действия скрипта нажмите по ниже идущему блоку:
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: