Удаление тега/блока в jquery все способы

Для использования ниже идущих скриптов понадобится подключить jquery

Подробно об удалении тегов/блоков/элементов в jquery

1. Удаляем тег/блок/элемент с помощью jquery(empty)
2. Удали тег/блок/элемент с помощью jquery(remove)
3. Удали тег/блок/элемент с помощью jquery(detach)
4. Удаляем тег/блок/элемент с помощью jquery(unwrap)
5. Как удалить элемент при загрузке страницы jquery
6. Как удалить тег/блок/элемент при клике на себя jquery

Скопировать ссылку



Удаляем тег/блок/элемент с помощью jquery(empty)

Метод "empty" в jquery удаляет все содержимое внутри тега. Все элементы, текст, в общем все, что есть внутри тега будет удалено!

Для того, чтобы весь процесс удаления не был скучным - сделаем его активным, для этого нам понадобится:

Нам нужно использовать один из способов...

Html код с тегами/элементами внутри другого тега, которые и будем удалять:

<div class="delitebyempty">
<p>Текст-1</p>
<p>Текст-2</p>
<p>Текст-3</p>
</div>


Далее нам понадобится кнопка... button, добавим туда onclick, повесим прямо на кнопку, с вызовом функцию(deliteElemetByEmpty), которая и удалит наши элементы/ теги в jquery:

<button onclick="deliteElemetByEmpty();">button</button>

Далее напишем функцию, которая и удалит наши элементы из дерева 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 с помощью empty
Скопировать ссылку



Удали тег/блок/элемент с помощью jquery(remove)

Один из вариантов удаления элемента, тега, блока в дереве Dom - это использование метода remove.

Чем отличается remove и empty

Метод удаляет все элементы внутри тега/элемента, без удаления тега к которому обратились.

А remove удаляет и тег к которому обратились.

Нам потребуется...

Результат удаления элемента в jquery с помощью remove

Для того, чтобы увидеть процесс удаления элемента нажми на кнопку: "Удали элемент в jquery с помощью remove"


Текст-1

Текст-2

Текст-3

Удали элемент в jquery с помощью remove

Скрипт удаления элемента в 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

<input name="delitelementbydetach" value="delitelementbydetach">

Здесь...

Снова удалим элемент по нажатию на кнопку + onclick + функция :

<button onclick="deliteElemetByDetach();">Удали элемент в jquery с помощью detach</button>

Нам потребуется соответствующая функция...

<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 с помощью detach
Скопировать ссылку



Удаляем тег/блок/элемент с помощью jquery(unwrap)

В следующем примере удалим родительский элемент. .


В нашем примере тег будет:

delbywrap

Для того, чтобы удалить родительский элемент, нам опять понадобится несколько элементов 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 с помощью unwrap
Скопировать ссылку



Как удалить элемент при загрузке страницы jquery

Иногда требуется удалить элемент в момент загрузки страницы(всякое бывает смайлы)

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

<li class="start red">Блок, который будет удаляться при загрузке jquery </li>

Используем один из выше описанных методов...

<script>$("li.start.red").remove();</script>

Результат удаления блока при загрузке :

Блок, который будет удаляться при загрузке jquery

Естественно, что вы ничего не увидите, потому, что элемент был удален!

Это очередной, довольно простой пример!

Скопировать ссылку



Как удалить элемент при клике на себя jquery

Вроде бы перебрали множество вариантов.

Пожалуй рассмотрим ещё один из вариантов - это "удаление элемента при клике на себя!"

Проделаем все те же необходимые манипуляции, что удже выше повторили множество раз...

Создадим блок из div с атрибутом attribute style, где пропишем border:

<div id="delite2" style="border: 1px solid red">Данный блок - элемент будем удалять с помощью клика на себя</div>

Далее обработаем наше нажатие на себя и возьмем метод удаления элемента remove:

<script>
$( "#delite2" ).click(
function()
{
this.remove();
});
</script>


Живой пример удаления элемента при нажатии на себя

Чтобы увидеть действия скрипта нажмите по ниже идущему блоку:

Данный блок - элемент будем удалять с помощью клика на себя

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---