con - ¿Cómo eliminar un elemento HTML usando Javascript?
insertar codigo html con jquery (11)
Soy un novato total. ¿Puede alguien decirme cómo eliminar un elemento HTML utilizando 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 muy poco tiempo y luego aparecerá de nuevo inmediatamente. Quiero eliminar completamente el elemento cuando hago clic en el botón.
Cambia el tipo de entrada a "botón". Como dijeron TJ y Pav, el formulario está siendo enviado. Tu Javascript parece correcto, y te felicito por probarlo de la manera que no es JQuery :)
Debería usar input type = "button" en lugar de input type = "submit".
<form>
<input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
</form>
Consulte el Centro de desarrolladores de Mozilla para obtener recursos html y javascript básicos
Ese es el código correcto. Lo que probablemente está sucediendo es que su formulario se está enviando, y verá la nueva página (donde el elemento volverá a existir).
Esto funciona. Simplemente quite el botón del div "ficticio" si desea 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>
Intenta ejecutar este código en tu script .
document.getElementById("dummy").remove();
Y con suerte eliminará el elemento / botón.
Lo que sucede es que se envía el formulario y, por lo tanto, se actualiza la página (con su contenido original). Usted está manejando el evento click en un botón de enviar.
Si desea eliminar el elemento y no enviar el formulario, maneje el evento submit en el formulario y devuelva false de 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 (ni desea) un formulario para eso en absoluto, no si su único propósito es eliminar el div falso. 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 está pasado de moda. Parece que tiene buenos instintos porque su código JavaScript está en su propio archivo y tal. El siguiente paso es llevarlo más lejos y evitar el uso de atributos onXYZ para conectar manejadores de eventos. En cambio, en su JavaScript, puede conectarlos con la forma más nueva (circa año 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;
}
}
... luego llame a pageInit(); desde una etiqueta de script al final del body de la página (justo antes de la etiqueta de cierre </body> ) o desde el evento de load la window , aunque eso ocurre muy tarde en el ciclo de carga de la página y por lo tanto no es bueno para conectando controladores de eventos (sucede después de que todas las imágenes finalmente se hayan cargado, por ejemplo).
Tenga en cuenta que he tenido que poner algo de manejo para lidiar con las diferencias del navegador. Probablemente querrá una función para conectar eventos para que no tenga que repetir esa lógica todo el tiempo. O considere usar una biblioteca como jQuery , Prototype , YUI , Closure o cualquiera de varios otros para suavizar las diferencias de navegador para usted. Es muy importante entender las cosas subyacentes, tanto en términos de los fundamentos de JavaScript como de los fundamentos DOM, pero las bibliotecas lidian con muchas inconsistencias y también proporcionan muchas utilidades prácticas, como un medio de conectar manejadores de eventos que trata con diferencias de navegador La mayoría de ellos también proporcionan una forma de configurar una función (como pageInit ) para ejecutar tan pronto como el DOM esté listo para ser manipulado, mucho antes de que se window load window .
Todavía soy novato también, pero aquí hay una manera simple y fácil: puedes usar outerHTML, que es la etiqueta completa, no solo una porción:
EX: <tag id=''me''>blahblahblah</tag> ''s innerHTML sería blahblahblah , y outerHTML sería todo, <tag id=''me''>blahblahblah</tag> .
<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 no desea mostrarlo, puede diseñarlo en JS utilizando 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 la opacity hace que el elemento aún se muestre, solo que no puede verlo tanto. Además, puede seleccionar texto, copiar, pegar y hacer todo lo que normalmente podría hacer, aunque sea invisible. Visibility ajusta más a su situación, pero dejará un espacio en blanco transparente tan grande como el elemento al que se aplicó. Yo recomendaría que lo muestres, dependiendo de cómo hagas tu página web. Muestra básicamente borrar el elemento de tu vista, pero aún puedes verlo en DevTools. ¡Espero que esto ayude!
Tu JavaScript es correcto Su botón tiene type="submit" que está causando que la página se actualice.
Vuelve a aparecer porque su botón de enviar vuelve a cargar la página. La forma más sencilla de evitar este comportamiento es agregar un return false al onclick como onclick :
<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />
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()
})
})