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

8018
Visitas

0
Resp

Por alber hace 8 años

Admin