Описание: Удаляет все совпавшие элементы из DOM.
.remove( [ селектор ] )
Добавлена в версию: 1.0
селектор
Выражение jQuery для фильтрации элементов предназначенных для удаления.
Подобно .empty(), метод .remove()
удаляет элементы из DOM. Мы используем .remove(),
когда мы хотим удалить сам элемент, а также все внутри.
В дополнение к самим элементам, все связанные события и данные jQuery, связанные с элементами, будут удалены.
Рассмотрим следующий HTML:
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
Мы можем выбрать любой элемент для удаления:
$('.hello').remove();
Это приведет к тому, что в структуре DOM, элемент с
<div class="hello"> будет удален:
<div class="container"> <div class="goodbye">Goodbye</div> </div>
Если бы мы имели любое количество вложенных элементов внутри
<div class="hello">, они были бы тоже удалены.
Другие конструкции jQuery, такие как данные или обработчики событий будут также удалены.
Мы также можем включить селектор в качестве дополнительного параметра. Например, мы могли бы переписать предыдущий код удаления DOM следующим образом:
$('div').remove('.hello');
Это приведет к той же структуре DOM:
<div class="container"> <div class="goodbye">Goodbye</div> </div>
Примеры
Пример 1
Удаляет все параграфы из DOM.Пример 1 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").remove();
});
});
</script>
<style>p { background:yellow; margin:6px 0; }</style>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
</body>
</html>
Пример 2
Удаляет все параграфы, содержащие "Hello" из DOMПример 2 - Полный код
Удаляет все параграфы, содержащие "Hello" из DOM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").remove(":contains('Hello')");
});
});
</script>
</head>
<body>
<p class="hello">Hello</p>
how are
<p>you?</p>
<button>Call remove(":contains('Hello')") on paragraphs</button>
</body>
</html>
Была ли эта информация полезной?
