Resumo : neste tutorial, você aprenderá como remover um elemento do DOM usando o método removeChild()
and remove()
.
Removendo um elemento usando o método removeChild()
Para remover um elemento do DOM, siga estas etapas:
- Primeiro, selecione o elemento de destino que deseja remover usando métodos DOM, como
querySelector()
. - Em seguida, selecione o elemento pai do elemento de destino e use o
removeChild()
método.
Suponha que você tenha o seguinte documento HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Removing a element</title>
</head>
<body>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/service">Service</a></li>
<li><a href="/about">About</a></li>
</ul>
<script>
// select the target element
const e = document.querySelector("li:last-child");
// remove the last list item
e.parentElement.removeChild(e);
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona:
- Primeiro, selecione o último item da lista usando o
querySelector()
método. - Em seguida, selecione o elemento pai do item da lista usando
parentElement
e chame oremoveChild()
método no elemento pai para remover o último item da lista.
Observe que se você quiser apenas ocultar o elemento, poderá usar o style
objeto:
const e = document.querySelector('li:last-child');
e.style.display = 'none';
Linguagem de código: JavaScript ( javascript )
Removendo um elemento usando o método remove()
Para remover um elemento do DOM, você também pode usar o método remove() do elemento.
Todos os principais navegadores suportam o método remove(), exceto o IE. Como o IE foi descontinuado, você pode usar o método remove() hoje. Por exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Removing a element</title>
</head>
<body>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/service">Service</a></li>
<li><a href="/about">About</a></li>
</ul>
<script>
// select the target element
const e = document.querySelector("li:last-child");
// remove the last list item
e.remove();
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona.
- Primeiro, selecione o último elemento do
ul
elemento. - Segundo, chame o método
remove()
desse elemento para removê-lo do DOM.
Resumo
- Use o método
removeChild()
ouremove()
para remover um elemento do DOM. - Defina o
style.display
do elemento como'none'
para ocultar o elemento.
Anterior