Código de JavaScript - Agregar y eliminar elementos li de una lista ul con javascript

Imágen de perfil

Agregar y eliminar elementos li de una lista ul con javascriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Publicado el 28 de Mayo del 2014 por Xavi
14.727 visualizaciones desde el 28 de Mayo del 2014. Una media de 119 por semana
Código que muestra como añadir y eliminar elementos en una lista desordenada.

Versión 1
estrellaestrellaestrellaestrellaestrella(7)

Publicado el 28 de Mayo del 2014gráfica de visualizaciones de la versión: Versión 1
14.728 visualizaciones desde el 28 de Mayo del 2014. Una media de 119 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes visualizar un ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Añadir y eliminar elementos li de una lista desordenada (ul) con javascript</title>
        <style>
            li span {
                color:#fff;
                border:1px solid #ccc;
                background-color:#808080;
                margin-right:10px;
                padding: 0 2px;
                border-radius:4px;
                -moz-border-radius:4px;
                -webkit-border-radius:4px;
                -o-border-radius:4px;
                border-radius:4px;
                font-weight:bold;
                font-size:0.8em;
                cursor:pointer;
            }
        </style>
 
        <script>
        // http://www.lawebdelprogramador.com
 
        /**
         * Funcion que añade un <li> dentro del <ul>
         */
        function add_li()
        {
            var nuevoLi=document.getElementById("nuevo_li").value;
            if(nuevoLi.length>0)
            {
                if(find_li(nuevoLi))
                {
                    var li=document.createElement('li');
                    li.id=nuevoLi;
                    li.innerHTML="<span onclick='eliminar(this)'>X</span>"+nuevoLi;
                    document.getElementById("listaDesordenada").appendChild(li);
                }
            }
            return false;
        }
 
        /**
         * Funcion que busca si existe ya el <li> dentrol del <ul>
         * Devuelve true si no existe.
         */
        function find_li(contenido)
        {
            var el = document.getElementById("listaDesordenada").getElementsByTagName("li");
            for (var i=0; i<el.length; i++)
            {
                if(el[i].innerHTML==contenido)
                    return false;
            }
            return true;
        }
 
        /**
         * Funcion para eliminar los elementos
         * Tiene que recibir el elemento pulsado
         */
        function eliminar(elemento)
        {
            var id=elemento.parentNode.getAttribute("id");
            node=document.getElementById(id);
            node.parentNode.removeChild(node);
        }
    </script>
    </head>
 
    <body>
        <h1>Añadir y eliminar elementos li de una lista desordenada ul con javascript</h1>
        <p>
            <form>
                <input type="text" id="nuevo_li">
                <br><input type="submit" onclick="return add_li()" value="añadir li">
            </form>
        </p>
        <ul id="listaDesordenada">
        </ul>
    </body>
</html>



Comentarios sobre la versión: Versión 1 (7)

Felipe nicolas Alvarado diaz
22 de Noviembre del 2014
estrellaestrellaestrellaestrellaestrella
Primero que todo, muy agradecido, muy buen codigo, super simple te implementar, pero tengo un problema, lo que sucede es que lo estilo implementando a en un formulario de orden de compra, lo cual me agrega varios productos por orden, hasta aqui ningun problema ... agrega varios productos correctamente...
Pero necesito hacer una funcion para editar estos elementos, y necesito listar los elementos ya registrados en una orden de compra, los cuales puedan ser eliminados y tambien se puedan agregar mas.

Espero me haya logrado explicar bien y puedas guiarme porfavor, saludos y muchas gracias.
Responder
iver
07 de Enero del 2015
estrellaestrellaestrellaestrellaestrella
me pudes explicar cada linea de codigo de los script
Responder
juan
10 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
Muchas gracias es justo lo que estaba necesitando. Slds!
Responder
Daniel Reyes
01 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
Buen día...
En el código de <code>if(el[i].innerHTML==contenido)</code> nunca va a ser igual porque estas comparando todo el DOM del innerHTML contra la etiqueta del id del li, por lo que agrega indiscriminadamente aún cuando este ya exista...
Responder
EpicAngel
26 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
si,como dice daniel reyes la function find_li(contenido) no funciona, la verdad en javascript estoy muy verde así que realice el codigo con selectores de jquery espero que les sirva:
function find_li(contenido) :)
{
var bandera=true;
contenido = "X" + contenido;
$("#listadesordenada li").each(function(){
//console.log("etiqueta li -- "+ $(this).text() +" --es igual a contenido -- " + contenido + " ?");

if($(this).text()== contenido){
bandera = false;
return;

}
} )

return bandera;

}
Responder
EpicAngel
26 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
function find_li(contenido) :) <----------------la carita feliz no va perdón :p
Responder
jorge
12 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Perdón pero lo modifique un poquito....

<html>
<head>
<script>
function agregarArticulo()
{
var textarea=document.getElementById("articulo").value;
if(textarea.length>0)
{
if(find_li(textarea))
{
var li=document.createElement('li');
li.innerHTML="<button onclick='eliminar(this)'> Borrar Art&iacute;culo </button> ";
var text=document.createTextNode(textarea);
li.appendChild(text);
document.getElementById("lista").appendChild(li);

}
}
return false;
}

function find_li(contenido)
{
var el = document.getElementById("lista").getElementsByTagName("li");
for (var i=0; i<el.length; i++)
{
if(el[i].innerHTML==contenido)
return false;
}
return true;
}

function eliminar(elemento)
{
elemento.parentNode.remove();
}
</script>
</head>

<body>
<div>

<div>
<h1>Lista de compras</h1>
</div>

<div>
<ul id="lista"></ul>
<textarea id="articulo" placeholder="Ingrese el producto"></textarea>
<button onclick="agregarArticulo()" id="agregar">Agregar !</button>
</div>

</div>

</body>

</html>
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2680