Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript » Código de JavaScript - Agregar y eliminar elementos li de una lista ul con javascript

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

Volver
Agregar Código Fuente
<<>>

Versión 1
estrellaestrellaestrellaestrellaestrella(9)

Publicado el 28 de Mayo del 2014gráfica de visualizaciones de la versión: Versión 1
76.808 visualizaciones desde el 28 de Mayo del 2014
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 (9)

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
7 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
1 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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....

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
<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
edwin
28 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
hola gracias grandioso aporte como hago para seleccionar un iten y editarlo en el primer codigo es para simular la carga de datos en un formulario
Responder
sergio
6 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
hola estoy iniciando en esto de la programación y me tope con este código que esta genial!!!!.
disculpa, hay alguna forma de hacer que esa lista desordenada entre en un textarea con js??, lo he estado intentando y sin éxito alguno y eso me esta rompiendo la cabeza :'V
Responder

Comentar la versión: Versión 1

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

http://lwp-l.com/s2680