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
parentElemente 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 styleobjeto:
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
ulelemento. - 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.displaydo elemento como'none'para ocultar o elemento.
Anterior
