Como agregar o eliminar elementos con javascript
Vamos a ver una guía de como agregar o eliminar elementos de una div o cualquier otro elemento utilizando un poco de javascript y jquery. Si lo quieres utilizar para otro elemento que no sea una div solo tienes que marcarlo con una id o seleccionarlo por su nombre clave de tag html.
Esto es muy útil si queremos ir agregando o eliminado elementos del dom de la pagina y conseguir así un efecto de rapidez ya que todo sucede casi en tiempo real sin que la pagina se recargue.
Comentar que es necesario usar jquery obviamente aunque se puede adaptar a solo javascript.
Ahora veamos el ejemplo en código y después la demo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style> body { font-size: sans-serif; max-width: 400px; } #contenedor li { padding: 18px; margin: 8px 0; background: #ddd; list-style: none; } #contenedor li a { cursor: pointer; float: right; padding: 3px 7px; background: #fbfbfb; } </style> <script> //Función crear elemento function crear_elemento(){ $('#contenedor').append('<li>Contenido ' + Math.random() + ' <a onclick="eliminar_elemento(this);">×</a></li>'); } //Función eliminar elemento function eliminar_elemento(valor){ valor.parentNode.parentNode.removeChild(valor.parentNode); } </script> <body> <h1>Como agregar o eliminar elementos a una div</h1> <div id="contenedor"> <li>Contenido 1<a onclick="eliminar_elemento(this);">×</a></li> <li>Contenido 2<a onclick="eliminar_elemento(this);">×</a></li> </div> <input type="button" value="Agregar elemento" onclick="crear_elemento();" style="float: right;"> </body>Demo
Editado
3
Puntos
Puntos
8106
Visitas
Visitas
0
Resp
Resp
Por alber hace 85 meses
Administrador