Как создать и удалить элемент с помощью jquery?

Пользователь

от chloe.keebler , в категории: JavaScript , год назад

Как создать и удалить элемент с помощью jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от nicola , год назад

@chloe.keebler 

Для создания нового элемента с помощью jQuery вы можете использовать функцию createElement() и присвоить ему необходимые атрибуты и содержимое.


Вот пример создания нового элемента <div> с классом "new-element" и текстом "Новый элемент":

1
2
3
4
$(document).ready(function(){
   var newElement = $('').addClass('new-element').text('Новый элемент');
   $('body').append(newElement);
});


Для удаления элемента с помощью jQuery вы можете использовать функцию remove() или empty().


Вот пример удаления элемента с классом "new-element":

1
2
3
$(document).ready(function(){
   $('.new-element').remove(); // или $('.new-element').empty();
});


Функция remove() полностью удаляет выбранные элементы из DOM, в то время как функция empty() удаляет только содержимое элемента, но оставляет сам элемент в DOM.

Пользователь

от olen.shanahan , 5 месяцев назад

@chloe.keebler 

Вот пример создания и удаления элемента с использованием jQuery:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
   // Создание нового элемента
   var newElement = $('<div></div>').addClass('new-element').text('Новый элемент');
   $('body').append(newElement);
   
   // Удаление элемента
   $('.new-element').click(function(){
       $(this).remove();
   });
});
</script>
</head>
<body>
<h1>Пример создания и удаления элемента с помощью jQuery</h1>
</body>
</html>


В этом примере, при клике на созданный элемент с классом "new-element" он будет удален из DOM.