Remover elemento por ID

Ao remover um elemento com JavaScript padrão, você deve ir primeiro ao pai:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Ter que ir primeiro ao nó pai parece um pouco estranho para mim; existe uma razão para o JavaScript funcionar assim?

Sei que aumentar as funções DOM nativas nem sempre é a melhor ou a mais popular solução, mas isso funciona bem para navegadores modernos.

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

E então você pode remover elementos como este

document.getElementById("my-element").remove();

ou

document.getElementsByClassName("my-elements").remove();

Nota: esta solução não funciona para o IE 7 e abaixo. Para mais informações sobre como estender o DOM, leia este artigo .

Edição : Revendo minha resposta em 2019, node.remove()chegou ao resgate e pode ser usada da seguinte maneira (sem o polyfill acima):

document.getElementById("my-element").remove();

ou

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

Essas funções estão disponíveis em todos os navegadores modernos (não no IE). Leia mais sobre MDN .

Crossbrowser e IE> = 11:

document.getElementById("element-id").outerHTML = "";

Você poderia criar uma removefunção para não precisar pensar nisso toda vez:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

É o que o DOM suporta . Pesquise nessa página por "remover" ou "excluir" e removeChild é o único que remove um nó.

O DOM está organizado em uma árvore de nós, em que cada nó tem um valor, juntamente com uma lista de referências aos seus nós filhos. Portanto, element.parentNode.removeChild(element)imita exatamente o que está acontecendo internamente: primeiro, você acessa o nó pai e remove a referência ao nó filho.

A partir de DOM4, uma função auxiliar é fornecida para fazer a mesma coisa: element.remove(). Isso funciona em 87% dos navegadores (a partir de 2016), mas não no IE 11. Se você precisar oferecer suporte a navegadores antigos, poderá:

• Remova os elementos pelo nó pai, como na pergunta ,
• modificar as funções DOM nativas, como na resposta de Johan Dettmar , ou
• use um polyfill DOM4 .

Para remover um elemento:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

Para remover todos os elementos com, por exemplo, um determinado nome de classe:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

você pode apenas usar element.remove()

O ChildNode.remove()método remove o objeto da árvore à qual ele pertence.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Aqui está um violino que mostra como você pode ligar document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Não há necessidade de estender o NodeList. Já foi implementado.

**

Você pode remover diretamente esse elemento usando o remove()método DOM.

aqui está um exemplo:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

De acordo com o DOM nível 4 dados técnicos, que é a versão atual em desenvolvimento, existem alguns novos métodos calhar mutação disponíveis: append(), prepend(), before(), after(), replace(), e remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

Ter que ir primeiro ao nó pai parece um pouco estranho para mim; existe uma razão para o JavaScript funcionar assim?

O nome da função é removeChild()e como é possível remover o filho quando não há pai? :)

Por outro lado, você nem sempre precisa chamá-lo como mostrou. element.parentNodeé apenas um auxiliar para obter o nó pai do nó fornecido. Se você já conhece o nó pai, pode usá-lo da seguinte maneira:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

==================================================== =======

Para adicionar algo mais:

Algumas respostas apontaram que, em vez de usar parentNode.removeChild(child);, você pode usar elem.remove();. Mas como eu notei, há uma diferença entre as duas funções, e isso não é mencionado nessas respostas.

Se você usar removeChild(), ele retornará uma referência ao nó removido.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

Mas se você usar elem.remove();, não retornará a referência.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Esse comportamento pode ser observado no Chrome e no FF. Eu acredito que vale a pena notar :)

Espero que minha resposta agregue algum valor à pergunta e seja útil!

As funções que usam ele.parentNode.removeChild (ele) não funcionarão para elementos que você criou, mas ainda não inseriu no HTML. Bibliotecas como jQuery e Prototype sabiamente usam um método como o seguinte para evitar essa limitação.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

Penso que o JavaScript funciona assim porque os designers originais do DOM consideravam a navegação pai / filho e a navegação anterior / seguinte como uma prioridade mais alta do que as modificações DHTML que são tão populares hoje em dia. Ser capaz de ler de um <input type = 'text'> e escrever para outro por localização relativa no DOM foi útil em meados dos anos 90, uma época em que a geração dinâmica de formulários HTML inteiros ou elementos interativos da GUI quase não brilhava. olho de algum desenvolvedor.

Ter que ir primeiro ao nó pai parece um pouco estranho para mim; existe uma razão para o JavaScript funcionar assim?

IMHO: A razão para isso é a mesma que já vi em outros ambientes: você está executando uma ação com base no seu "link" para algo. Você não pode excluí-lo enquanto estiver vinculado a ele.

Como cortar um galho de árvore. Sente-se no lado mais próximo da árvore durante o corte ou o resultado será ... infeliz (embora engraçado).

Este, na verdade, vem do FireFox ... pela primeira vez, o IE estava à frente do pacote e permitiu a remoção de um elemento diretamente.

Essa é apenas minha suposição, mas acredito que a razão pela qual você deve remover um filho através dos pais deve-se a um problema com a maneira como o FireFox lidou com a referência.

Se você chama um objeto para confirmar o hari-kari diretamente, imediatamente após a morte, você ainda mantém essa referência a ele. Isso tem o potencial de criar vários erros desagradáveis ​​... como não removê-lo, removê-lo, mas mantendo referências válidas ou simplesmente um vazamento de memória.

Acredito que, quando eles perceberam o problema, a solução alternativa era remover um elemento por meio do pai, porque, quando o elemento desapareceu, você agora está simplesmente mantendo uma referência ao pai. Isso interromperia todo esse desagradável e (se o fechamento de um nó de árvore por nó, por exemplo) seria "bastante eficiente".

Deveria ser um bug facilmente corrigível, mas, como em muitas outras coisas na programação da web, o lançamento provavelmente foi apressado, levando a isso ... e quando a próxima versão apareceu, havia pessoas o usando para mudar isso. para quebrar um monte de código.

Novamente, tudo isso é simplesmente meu palpite.

No entanto, aguardo com expectativa o dia em que a programação na Web finalmente terá uma limpeza completa na primavera, todas essas pequenas idiossincrasias estranhas serão limpas e todos começarão a jogar pelas mesmas regras.

Provavelmente no dia seguinte ao meu servo-robô me processar por salários atrasados.

Pelo que entendi, a remoção direta de um nó não funciona no Firefox, apenas no Internet Explorer. Portanto, para dar suporte ao Firefox, você precisa ir até o pai para remover o filho.

Ref: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}

Esta é a melhor função para remover um elemento sem erro de script:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

Nota para EObj=document.getElementById(EId).

Este é um sinal de igual que não ==.

se o elemento EIdexiste, a função o remove; caso contrário, retorna false, não error.