Removendo elementos pelo nome da classe?


126

Eu tenho o código abaixo para encontrar elementos com o nome da classe:

// Get the element by their class name
var cur_columns = document.getElementsByClassName('column');

// Now remove them

for (var i = 0; i < cur_columns.length; i++) {

}

Só não sei como removê-los ... tenho que referenciar os pais ou algo assim? Qual é a melhor maneira de lidar com isso?

@ Karim79:

Aqui está o JS:

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");
var len = col_wrapper.length;

alert(len);

for (var i = 0; i < len; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        col_wrapper[i].parentNode.removeChild(col_wrapper[i]);
    }
}

Aqui está o HTML:

<div class="columns" id="columns">
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div name="columnClear" class="contentClear" id="columnClear"></div>
</div>

Edit: Acabamos usando apenas a opção jQuery.


4
Honestamente, a melhor maneira é usar o jQuery. Realmente não entendo por que alguém iria querer mais manipular o DOM manualmente.
precisa saber é o seguinte

7
Eu não sei lol .... Eu apenas sinto que me sentiria sujo conhecendo estruturas e não tendo nenhum conhecimento de poder realmente usar vanilla JS. Desde que eu não sou uma pessoa JS enorme, eu tento & código apenas com baunilha JS quando eu usá-lo para que eu não esqueço as coisas lol
Brett

20
Certo. Quem diabos gostaria de ser um desenvolvedor qualificado e completo. Absurdo!
precisa saber é o seguinte

1
Uma boa abordagem, é claro, mas apenas porque você está usando o jQuery, não significa que você precisa desistir de entender como ele funciona ou o que o DOM subjacente oferece. Você provavelmente poderia consertar seu carro se quisesse (O DOM), mas seu mecânico provavelmente é mais experiente (a equipe do jQuery).
Lior Cohen

2
@Lior: Sim, bem, meu mecânico não precisa me ajudar a girar a chave ou abrir a janela. ; o)
user113716

Respostas:


189

Usando jQuery (que você realmente poderia estar usando neste caso, eu acho), você poderia fazer o seguinte:

$('.column').remove();

Caso contrário, você precisará usar o pai de cada elemento para removê-lo:

element.parentNode.removeChild(element);

41
+0,75 para usar jQuery, +0,25 para também fornecer uma solução não-jQuery: p
ThiefMaster

7
+0,01 para usar o jQuery, +0,99 para também fornecer uma solução não-jQuery: p
Alex Pyzhianov

183

Se você preferir não usar o JQuery:

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

1
Uma quantidade surpreendente de soluções não funcionais por aí. Isso está certo. Obrigado!
que você

11
Se alguém está se perguntando por que ele está removendo o primeiro elemento (índice 0) sempre, é porque quando você remove um elemento, ele também reduz a elementsmatriz.
Jefferson Lima

e os outros índices (aceitar o índice 0)?
precisa saber é o seguinte

1
@ofir_aghai como @JeffersonLima aponta que getElementsByClassNameé uma coleção ao vivo. developer.mozilla.org/pt-BR/docs/Web/API/NodeList
Veikko Karsikko

2
Observação agradável sobre o fato de que elementos encolhe matriz
ferralucho

33

Usando o ES6, você poderia fazer como:

const removeElements = (elms) => elms.forEach(el => el.remove());

// Use like:
removeElements( document.querySelectorAll(".remove") );
<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>


Para aproveitar ainda mais o ES6, que tal: var removeElements = (elms) => [... elms] .forEach (el => el.remove ());
Calculuswhiz

1
Melhor resposta Obrigado!
Francesco

25

Em Javascript puro, sem jQuery ou ES6, você pode fazer:

const elements = document.getElementsByClassName("my-class");

while (elements.length > 0) elements[0].remove();

2
Resposta mais clara, sem jQuery e ES6
Eric

2
Talvez sua resposta tenha surgido mais tarde - deva ser a aceita, porque não depende do jQuery. Em geral, é melhor usar vanilla-js, não é?
Luckyfella 03/03

Melhor resposta sem o jQuery desnecessário e pesado. Diga NÃO ao jQuery. Sim ao gelo de baunilha!
Thanasis

13

Isso funciona para mim

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }

10

Brett - você está ciente de que o getElementyByClassNamesuporte do IE 5.5 a 8 não existe de acordo com o modo quirks ? É melhor seguir esse padrão se você se preocupa com a compatibilidade entre navegadores:

  • Obter elemento do contêiner por ID.
  • Obtenha os elementos filho necessários pelo nome da tag.
  • Faça uma iteração sobre filhos, teste a propriedade className correspondente.
  • elements[i].parentNode.removeChild(elements[i]) como os outros caras disseram.

Exemplo rápido:

var cells = document.getElementById("myTable").getElementsByTagName("td");
var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
    }
}

Aqui está uma demonstração rápida.

EDIT: Aqui está a versão fixa, específica para sua marcação:

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");

var elementsToRemove = [];
for (var i = 0; i < col_wrapper.length; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        elementsToRemove.push(col_wrapper[i]);
    }
}
for(var i = 0; i < elementsToRemove.length; i++) {
    elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
}

O problema foi minha culpa; quando você remove um elemento da matriz resultante, o comprimento é alterado, para que um elemento seja ignorado a cada iteração. A solução é armazenar uma referência para cada elemento em uma matriz temporária e, posteriormente, fazer um loop sobre eles, removendo cada um do DOM.

Experimente aqui.


Obrigado por isso - apesar de não ser um grande problema, pois é para uma seção de administradores. Na verdade, uma pessoa o usará ... mas ainda levará seus comentários em consideração.
Brett

@Brett - faça assim mesmo! Levará alguns minutos do seu tempo e você terá mais
cumprimentos

Ok, eu tentei isso ... ele relatou a quantidade correta de elementos quando fiz um alerta, mas ele removeu apenas dois dos quatro com esse nome de classe e recebi este erro: col_wrapper [i] é indefinido. Vou atualizar minha postagem com o código que usei.
Brett

@Brett - se você estiver interessado, consertei seu código atualizado e comentei o problema.
karim79

Cara, isso me ajudou mais do que você poderia imaginar com um problema que eu fiquei perplexo nas últimas duas horas. OBRIGADO!
Zoolander

4

Eu prefiro usar forEachover for/ whileloop. A fim de usá-lo é necessário para converter HTMLCollectiona Arrayprimeira:

Array.from(document.getElementsByClassName("post-text"))
    .forEach(element => element.remove());

Preste atenção, não é necessário da maneira mais eficiente. Apenas muito mais elegante para mim.


4

Uma linha

document.querySelectorAll(".remove").forEach(el => el.remove());

Por exemplo, você pode fazer nesta página para remover as informações do usuário

document.querySelectorAll(".user-info").forEach(el => el.remove());

1

Sim, você precisa remover do pai:

cur_columns[i].parentNode.removeChild(cur_columns[i]);

1

Você pode usar esta sintaxe: node.parentNode

Por exemplo:

someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);

2
Esta pergunta foi removida por className
JoeTidee

1

A função recursiva pode resolver seu problema como abaixo

removeAllByClassName = function (className) {
    function findToRemove() {
        var sets = document.getElementsByClassName(className);
        if (sets.length > 0) {
            sets[0].remove();
            findToRemove();
        }
    }
    findToRemove();
};
//
removeAllByClassName();

1
Haha evitou um loop. <3
Ivan Ivković

0

Caso você queira remover elementos que são adicionados dinamicamente, tente o seguinte:

document.body.addEventListener('DOMSubtreeModified', function(event) {
    const elements = document.getElementsByClassName('your-class-name');
    while (elements.length > 0) elements[0].remove();
});

0
const elem= document.getElementsByClassName('column')

for (let i = elem.length; 0 < i ; )
    elem[--i].remove();

OU

const elem= document.getElementsByClassName('column')

while (elem.length > 0 )
    elem[0].remove();

0

É muito simples, de uma linha, usar o operador de propagação ES6 devido document.getElementByClassName retorna uma coleção HTML.

[...document.getElementsByClassName('dz-preview')].map(thumb => thumb.remove());

-1

Os elementos de ignição aparecem com erro (código acima)

var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
    }
}

pode ser corrigido apenas executando o loop para trás da seguinte maneira (para que a matriz temporária não seja necessária)

var len = cells.length;
for(var i = len-1; i >-1; i--) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
   }
}

Isso é um pouco complicado. Por que não usar um ciclo de tempo? (ver minha resposta)
tocqueville

@tocqueville A pergunta postada usou um loop for. Eu estava apenas apontando como corrigir o erro com alterações mínimas no código dele.
precisa saber é o seguinte

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.