1

Como removo uma tag do HTML usando JavaScript?

Por exemplo, com o insertAfter(); e o insertBefore(); eu consigo inserir algumas tags, caso eu queira. Mas se eu quiser apagar do meu código, alguma TAG? Não por display: none, quero apagar mesmo.

Achei o remove() mas ele não funciona em todos os navegadores.

Exemplo

<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="3">Div 3</div>
<div class="4">Div 4</div>

No caso, se eu quisesse apagar a div 3? Como faço? Remover ela do HTML, ficar assim:

<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="4">Div 4</div>
1
  • 1
    Desculpe, sério que vc escolheu a resposta que usa children[...] ao invés de uma que usa seletor? Tudo bem que quer trabalhar usando children nem será necessário o class ou qualquer outro atributo, basta trabalhar pela ordem, mas só quero ter certeza que você realmente entendeu as respostas. Não é uma critica, só fiquei confuso mesmo pela sua decisão.
    – Syzoth
    Commented 12/05/2017 às 20:13

3 Respostas 3

5

Em jQuery seria isto:

$("#remove").click(function () {

    $("[class='3']").remove();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="remove">Remover</button>

<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="3">Div 3</div>
<div class="4">Div 4</div>

Em JavaScript seria isto:

document.getElementById("remove").onclick = function () {

    var el = document.querySelector("[class='3']");
    var pa = el ? el.parentNode : null;

    if (pa) {
        pa.removeChild(el);
    }

};
<button id="remove">Remover</button>

<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="3">Div 3</div>
<div class="4">Div 4</div>

Nota

O uso de numeros em classe da maneira que fez não é reconhecido e provavelmente é errado, por exemplo se tentar um seletor assim querySelector('.3') vai causar este erro:

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '.3' is not a valid selector.

Então recomendo trocar class pelo atributo data- e usar no seletor $("[data-index=3]") e document.querySelector("[data-index=3]")

document.getElementById("remove").onclick = function () {

    var el = document.querySelector("[data-index='3']");
    var pa = el ? el.parentNode : null;

    if (pa) {
        pa.removeChild(el);
    }

};
<button id="remove">Remover</button>

<div data-index="1">Div 1</div>
<div data-index="2">Div 2</div>
<div data-index="3">Div 3</div>
<div data-index="4">Div 4</div>

3

Eu costumo usar o jQuery.remove, mas realmente existem relatos de problemas com versões antigas do IE.

Como alternativa, você pode usar o .removeChild no elemento pai. (Lembrando que essa resposta usa apenas de JavaScript, sem JQuery)

document.getElementById('btRemover').onclick = function () { 
 var pai = document.getElementById('pai');
 pai.removeChild(pai.children[2]);
}
<div id="pai">
<div class="1">Div 1</div>
<div class="2">Div 2</div>
<div class="3">Div 3</div>
<div class="4">Div 4</div>
</div>

<input type="button" id="btRemover" value="Remover Div 3"></input>

2

O método nativo para isso é .removeChild() e tem de ser chamado pelo pai do elemento, pois como referiste o .remove() não é suportado pelo IE. Ele existe sim na API do jQuery, se for o caso.

Podes também fazer "força bruta" que é pai.innerHTML = '' e assim apagares o conteúdo de um dado elemento (e toda a sua descendência).

Exemplo:

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  var pai = this.parentNode;
  pai.removeChild(this); // o "this" é o "btn" nesta callback
});
<button type="button">Clica-me para eu desaparecer!</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .