Como remover um elemento HTML usando Javascript?

124

Eu sou um novato total. Alguém pode me dizer como remover um elemento HTML usando o Javascript original, não o jQuery.

index.html

<html>
<head>
 <script type="text/javascript" src="myscripts.js" > </script>
 <style>
 #dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
 }
 </style>
</head>
<body>
 <div id="dummy"></div>

 <form>
  <input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>
</body>

myscripts.js

function removeDummy() {
 var elem = document.getElementById('dummy');
 elem.parentNode.removeChild(elem);
}

O que acontece quando clico no botão enviar é que ele desaparece por um período muito curto e depois volta a aparecer imediatamente. Quero remover completamente o elemento quando clicar no botão.

javascript html Newbie Coder
fonte

E se eu clicar nele, detectar um erro e pressionar Parar ?

alex

Desculpe, é um tópico, mas é realmente engraçado, que ele / ela se denominou "Newbie Coder" e agora o perfil tem uma reputação de cerca de 9000. Pedir algo nos "bons velhos tempos" é realmente lucrativo hoje em dia. :)

Rene

189

O que está acontecendo é que o formulário está sendo enviado e, portanto, a página está sendo atualizada (com seu conteúdo original). Você está lidando com o clickevento em um botão de envio.

Se você deseja remover o elemento e não enviar o formulário, manipule o submitevento no formulário e retorne falsedo seu manipulador:

HTML:

<form  onsubmit="return removeDummy(); ">
    <input type="submit" value="Remove DUMMY"/>
</form>

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

Mas você não precisa (ou deseja) de um formulário para isso, não se seu único objetivo é remover a div fictícia. Em vez de:

HTML:

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

No entanto , esse estilo de configurar manipuladores de eventos é antiquado. Você parece ter bons instintos, pois seu código JavaScript está em seu próprio arquivo e tal. O próximo passo é ir além e evitar o uso de onXYZatributos para conectar manipuladores de eventos. Em vez disso, no seu JavaScript, você pode conectá-los da maneira mais recente (por volta do ano 2000):

HTML:

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}
function pageInit() {
    // Hook up the "remove dummy" button
    var btn = document.getElementById('btnRemoveDummy');
    if (btn.addEventListener) {
        // DOM2 standard
        btn.addEventListener('click', removeDummy, false);
    }
    else if (btn.attachEvent) {
        // IE (IE9 finally supports the above, though)
        btn.attachEvent('onclick', removeDummy);
    }
    else {
        // Really old or non-standard browser, try DOM0
        btn.onclick = removeDummy;
    }
}

... chame pageInit();de uma scripttag no final da sua página body(logo antes da </body>tag de fechamento ) ou de dentro do window loadevento, embora isso aconteça muito tarde no ciclo de carregamento da página e, portanto, geralmente não seja bom para conectar um evento manipuladores (isso acontece depois que todas as imagens finalmente foram carregadas, por exemplo).

Observe que eu tive que lidar com algumas diferenças para lidar com as diferenças do navegador. Você provavelmente desejará uma função para conectar eventos, para não precisar repetir essa lógica todas as vezes. Ou considere usar uma biblioteca como jQuery , Prototype , YUI , Closure ou qualquer uma das várias outras para suavizar essas diferenças de navegador. É muito importante entender as coisas subjacentes, tanto em termos de JavaScript e DOM, mas as bibliotecas lidam com muitas inconsistências e também fornecem muitos utilitários úteis - como um meio de conectar manipuladores de eventos que lidam com diferenças do navegador. A maioria deles também fornece uma maneira de configurar uma função (comopageInit) para executar assim que o DOM estiver pronto para ser manipulado, muito antes do window loaddisparo.

TJ Crowder
fonte

Altere-o type="button"ou coloque-o return false;em sua função JS

Pav

@ Pav: Acho que vou me submeter, porque este é apenas um exercício experimental. Eu vou fazer alguns projetos que usam submit, então é melhor eu me acostumar com isso ... De qualquer forma, obrigado pela ideia.

Newbie Coder #

@ Newbie: Adicionei mais algumas notas.

TJ Crowder

2

porque não apenas elem.remove ();

Muhammad Umer

1

@ Ghos3t - De várias maneiras: 1. Qualquer função que você chama de um manipulador de estilo de atributo deve ser global, e o namespace global já é Really Crowded ™ e é fácil escolher um nome de função que entre em conflito com outra coisa (isso pode ser resolvido usando um objeto com um nome provavelmente único e colocando todos os seus manipuladores nele). 2. Use a maneira antiga de estilo de atributo (ou a atribuição à onxyzpropriedade no elemento) apenas permite um único manipulador e, se você atribuir à propriedade, substitua o que quer que estivesse lá, para que não funcione bem com outras pessoas. (continuação)

TJ Crowder

34

Apenas faça isso element.remove();

Experimente aqui

http://jsfiddle.net/4WGRP/

Muhammad Umer
fonte

5

Cuidado com isso, pois essa parece ser uma adição relativamente nova e não possui suporte completo ao navegador, ou seja, IE e FF versões 22 e anteriores ( red-team-design.com/… ).

dule 18/09/13

1

Eu pessoalmente esperar mais 5 anos para usar este

slebetman

2

Bem, isso parece ter suporte agora: caniuse.com/#search=remove . Eu aceitaria usá-lo agora. Se for absolutamente necessário para apoiar IE11, suponho um polyfill poderia ser facilmente construída ...

jehon

5

Escrever código à prova de futuro é melhor do que programar para o passado. Economize seu tempo de manutenção e use.remove()

Gibolt

9

Você deve usar input type = "button" em vez de input type = "submit".

<form>
  <input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>

Confira o Mozilla Developer Center para obter recursos básicos de html e javascript

CoderHawk
fonte

1

Mudei seu link do W3Schools para o Mozilla Developer Center. Dê uma olhada no w3fools.com para o meu raciocínio ... Além disso, boa resposta :) #

213 Alastair Pitts Pitts

2

@Alastair Pitts - tudo bem. Eu só quero ponto PO para HTML e JS tutoriais básicos ..

CoderHawk

8

Seu JavaScript está correto. Seu botão possui o type="submit"que está causando a atualização da página.

Pav
fonte

5

Ele reaparece porque seu botão de envio recarrega a página. A maneira mais simples de evitar esse comportamento é adicionar um return falsepara o onclickassim:

<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />

mVChr
fonte

4

Mude o tipo de entrada para "botão". Como TJ e Pav disseram, o formulário está sendo enviado. Seu Javascript parece correto, e eu o recomendo por experimentá-lo de maneira não-JQuery :)

Newtang
fonte

Acho que vou ficar para enviar porque este é apenas um exercício experimental para meus projetos futuros que usos submeter então é melhor eu me acostumar com isso ...

Novato Coder

4

index.html

<input id="suby" type="submit" value="Remove DUMMY"/>

myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})

e-motiv
fonte

3

Esse é o código certo. O que provavelmente está acontecendo é que seu formulário está sendo enviado e você vê a nova página (onde o elemento existirá novamente).

alex
fonte

3

Tente executar esse código no seu script .

document.getElementById("dummy").remove();

E esperamos remover o elemento / botão.

Sim Reaper
fonte

2

Isso funciona. Basta remover o botão do "manequim" divse você quiser mantê-lo.

function removeDummy() {
  var elem = document.getElementById('dummy');
  elem.parentNode.removeChild(elem);
  return false;
}

#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}

<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>

Expandir snippet

Durtle02
fonte

1

Ainda sou novato também, mas aqui está uma maneira simples e fácil: você pode usar outerHTML, que é a tag inteira, não apenas uma parte:

<tag id='me'>blahblahblah</tag>O innerHTML de EX: seria blahblahblah, e oHTHT externo seria a coisa toda <tag id='me'>blahblahblah</tag>,.

Portanto, por exemplo, se você deseja excluir a tag, está basicamente excluindo seus dados; portanto, se você alterar o HTML externo para uma string vazia, é como excluí-lo.

<body>
    <p id="myTag">This is going to get removed...</p>
    <input type="button" onclick="javascript:
        document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
    " value="Remove Praragraph">
</body>

Em vez disso, se você quiser apenas não exibi-lo, poderá estilizá-lo em JS usando as propriedades de visibilidade, opacidade e exibição.

document.getElementById('foo').style.visibility = hidden;
//or
document.getElementById('foo').style.opacity = 0;
//or
document.getElementById('foo').style.display = none;

Observe que opacity o elemento ainda é exibido, mas você não pode vê-lo tanto. Além disso, você pode selecionar texto, copiar, colar e fazer tudo o que normalmente poderia fazer, mesmo que seja invisível.

Visibility se adapta melhor à sua situação, mas deixará um espaço transparente em branco do tamanho do elemento ao qual foi aplicado.

Eu recomendo que você exiba, dependendo de como você cria sua página da web. A tela basicamente exclui o elemento da sua visualização, mas você ainda pode vê-lo no DevTools. Espero que isto ajude!

HarryJamesPotter27
fonte

Como remover um elemento HTML usando Javascript?

Respostas: