Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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);">&times;</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);">&times;</a></li>
    <li>Contenido 2<a onclick="eliminar_elemento(this);">&times;</a></li>
</div>

 <input type="button" value="Agregar elemento" onclick="crear_elemento();" style="float: right;">

</body>
Demo
Editado
3
Puntos
0
Resp
473
Visitas
Por alber hace 10 meses
Administrador offline

Relaccionados

Para comentar Inicia sesión o Registrate