¿Cómo eliminar un elemento HTML usando Javascript?

124

Soy un novato total. ¿Alguien puede decirme cómo eliminar un elemento HTML usando el Javascript original, no 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);
}

Lo que sucede cuando hago clic en el botón enviar, es que desaparecerá por un tiempo muy corto y luego volverá a aparecer inmediatamente. Quiero eliminar completamente el elemento cuando hago clic en el botón.

javascript html Codificador novato
fuente

¿Qué pasa si hago clic en él, veo un error y presiono detener ?

alex

Lo siento, es de tema, pero en realidad es muy divertido, que él / ella se haya llamado "Newbie Coder" y ahora el perfil tiene una reputación de alrededor de 9000. Preguntar algo en los "buenos viejos tiempos" es realmente rentable hoy en día. :)

Rene

189

Lo que sucede es que el formulario se envía y, por lo tanto, la página se actualiza (con su contenido original). Estás manejando el clickevento en un botón de enviar.

Si desea eliminar el elemento y no enviar el formulario, maneje el submitevento en el formulario y regrese falsede su controlador:

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;
}

Pero no necesita (o desea) un formulario para eso, no si su único propósito es eliminar el div ficticio. En lugar:

HTML:

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

JavaScript:

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

Sin embargo , ese estilo de configuración de controladores de eventos es anticuado. Parece tener buenos instintos en cuanto a que su código JavaScript está en su propio archivo y tal. El siguiente paso es ir más allá y evitar el uso de onXYZatributos para conectar controladores de eventos. En cambio, en su JavaScript, puede conectarlos con la forma más nueva (alrededor del año 2000) en su lugar:

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;
    }
}

... luego llame pageInit();desde una scriptetiqueta al final de su página body(justo antes de la </body>etiqueta de cierre ), o desde dentro del window loadevento, aunque eso sucede muy tarde en el ciclo de carga de la página y, por lo tanto, generalmente no es bueno para conectar el evento handlers (sucede después de que todas las imágenes se hayan cargado finalmente, por ejemplo).

Tenga en cuenta que he tenido que manipularlo para solucionar las diferencias del navegador. Probablemente querrá una función para conectar eventos para que no tenga que repetir esa lógica cada vez. O considere usar una biblioteca como jQuery , Prototype , YUI , Closure o cualquiera de varias otras para suavizar esas diferencias de navegador por usted. Es muy importante comprender las cosas subyacentes que están sucediendo, tanto en términos de los fundamentos de JavaScript como de DOM, pero las bibliotecas tratan con muchas inconsistencias y también proporcionan muchas utilidades útiles, como un medio para conectar controladores de eventos que se ocupan de diferencias del navegador. La mayoría de ellos también proporcionan una forma de configurar una función (comopageInit) para ejecutarse tan pronto como el DOM esté listo para ser manipulado, mucho antes de que se window loadactive.

TJ Crowder
fuente

Cámbielo type="button"o póngalo return false;en su función JS

Pav

@Pav: Creo que me limitaré a enviar porque esto es solo un ejercicio experimental. Estaré haciendo algunos proyectos que usan submit, así que será mejor que me acostumbre ... Gracias de todos modos por la idea.

Newbie Coder

@Newbie: agregué algunas notas más.

TJ Crowder

2

por qué no simplemente hacer elem.remove ();

Muhammad Umer

1

@ Ghos3t - Un par de formas: 1. Cualquier función que llame desde un controlador de estilo de atributo debe ser global, y el espacio de nombres global ya es Really Crowded ™ y es fácil elegir un nombre de función que entre en conflicto con otra cosa (esto se puede abordar usando un objeto con un nombre probablemente único y poniendo todos sus controladores en él). 2. Use la antigua forma de estilo de atributo (o la asignación a la onxyzpropiedad en el elemento) solo permite un solo controlador, y si asigna a la propiedad, reemplaza lo que solía estar allí, por lo que no funciona bien con otros. (continuación)

TJ Crowder

34

Solo haz esto element.remove();

Pruébelo aquí MIRAR

http://jsfiddle.net/4WGRP/

Muhammad Umer
fuente

5

Tenga cuidado con esto, ya que parece ser una adición bastante nueva y no tiene soporte completo para el navegador, es decir, las versiones 22 y anteriores de IE y FF ( red-team-design.com/… ).

dule

1

Personalmente esperaría otros 5 años para usar esto

slebetman

2

Bueno, esto parece ser compatible ahora: caniuse.com/#search=remove . Aceptaría usarlo ahora. Si es absolutamente necesario admitir IE11, supongo que se podría construir fácilmente un polyfill ...

jehon

5

Escribir código preparado para el futuro es mejor que programar para el pasado. Ahórrese el tiempo de mantenimiento y utilice.remove()

Gibolt

9

Debe utilizar input type = "button" en lugar de input type = "enviar".

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

Pedido Mozilla Developer Center de HTML básico y los recursos de javascript

CoderHawk
fuente

1

Cambié su enlace de W3Schools al Centro de desarrolladores de Mozilla. Eche un vistazo a w3fools.com por mi razonamiento ... Aparte de eso, buena respuesta :)

Alastair Pitts

2

@Alastair Pitts - está bien. Solo quiero señalar PO a los tutoriales básicos de html y js ..

CoderHawk

8

Tu JavaScript es correcto. Su botón tiene lo type="submit"que hace que la página se actualice.

Pav
fuente

5

Vuelve a aparecer porque el botón de envío vuelve a cargar la página. La forma más sencilla de evitar este comportamiento es añadir una return falsea la onclickde este modo:

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

mVChr
fuente

4

Cambie el tipo de entrada a "botón". Como dijeron TJ y Pav, el formulario se está enviando. Su Javascript parece correcto, y lo felicito por probarlo de la manera que no es JQuery :)

Newtang
fuente

Creo que me quedaré con el envío porque este es solo un ejercicio experimental para mis proyectos futuros que utiliza el envío, así que será mejor que me acostumbre ...

Coder novato

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
fuente

3

Ese es el código correcto. Lo que probablemente está sucediendo es que su formulario se está enviando y ve la nueva página (donde el elemento existirá nuevamente).

alex
fuente

3

Intente ejecutar este código en su secuencia de comandos .

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

Y con suerte eliminará el elemento / botón.

Sim Reaper
fuente

2

Esto funciona. Simplemente quite el botón del "maniquí" divsi quiere mantener el botón.

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 fragmento

Durtle02
fuente

1

Todavía soy un novato también, pero aquí hay una manera simple y fácil: puede usar externalHTML, que es la etiqueta completa, no solo una parte:

EX: <tag id='me'>blahblahblah</tag>'s innerHtml sería blahblahblah, y outerHTML sería todo el asunto, <tag id='me'>blahblahblah</tag>.

Entonces, por ejemplo, si desea eliminar la etiqueta, básicamente está eliminando sus datos, por lo que si cambia el HTML externo a una cadena vacía, es como eliminarlo.

<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>

En cambio, si simplemente no desea mostrarlo, puede diseñarlo en JS usando las propiedades de visibilidad, opacidad y visualización.

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

Tenga en cuenta que opacity hace que el elemento todavía se muestre, pero no puede verlo tanto. Además, puede seleccionar texto, copiar, pegar y hacer todo lo que podría hacer normalmente, aunque sea invisible.

Visibility se adapta más a su situación, pero dejará un espacio transparente en blanco tan grande como el elemento al que se aplicó.

Le recomendaría que lo muestre, dependiendo de cómo cree su página web. Mostrar básicamente eliminando el elemento de su vista, pero aún puede verlo en DevTools. ¡Espero que esto ayude!

HarryJamesPotter27
fuente

¿Cómo eliminar un elemento HTML usando Javascript?

Respuestas: