Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Crear/eliminar elementos "li" desde Checkboxes

Estas en el tema de Crear/eliminar elementos "li" desde Checkboxes en el foro de Javascript en Foros del Web. Buenas!, antes de nada decir que he buscado y rebuscado y no encuentro respuestas adecuadas. Se se me pasó, lo siento de antemano y agradecería ...
  #1 (permalink)  
Antiguo 24/01/2013, 06:12
 
Fecha de Ingreso: agosto-2011
Mensajes: 2
Antigüedad: 13 años, 3 meses
Puntos: 0
Crear/eliminar elementos "li" desde Checkboxes

Buenas!, antes de nada decir que he buscado y rebuscado y no encuentro respuestas adecuadas. Se se me pasó, lo siento de antemano y agradecería que me indicaran dónde esta la respuesta.
Dicho esto...
Estoy realizando una pagina (html) con un listado de opciones para configurar un producto. Cada opción tienen un checkbox para ser seleccionada.
Al hacer click en un checkbox se debe crear un elemento de lista (li) y al desmarcarlo se debe eliminar dicho elemento.
El caso es que funciona... pero solo una vez??¿?
Como podréis suponer soy nuevo en esto.

El código es este;

Javascript

Código PHP:
function incremento(nombre,precio,id) {//función para añadir importes y nombres a la lista
    
var container document.getElementById("contenedorpedido");//almacenamos en la variable contaier el div donde insertaremos la lista
    
if(document.getElementById('ch'+id).checked!=false){
        var 
item=[nombre,precio,id];//almacenamos los valores en un nuevo array
        
ingredientes.push(item);//insertamos el nuevo array en el array ingredientes
        
var lastitem=ingredientes.length-1;//almacenamos en la variable "lastitem" el último elemento insertado en el array
        
var ul=document.createElement("ul");//Creamos el elemento de lista (ul)
        
ul.id='ul'+id;
        var 
li=document.createElement("li");//creamos el elemento item de lista (li)
        
li.id='li'+id;
        
ul.appendChild(li);//definimos el elemento "item" como hijo de "lista"
        
container.appendChild(ul);//definimos el elemento "ul" como hijo del div contenedor
        
li.innerHTML ingredientes[lastitem][0]+' '+ingredientes[lastitem][1]+' Euros';//insertamos el contenido del array con los ingredientes
    
}else{
        var 
padre document.getElementById('ul'+id);
        
padre.removeChild(document.getElementById('li'+id));
    }


HTML

Código HTML:
<form action="" method="post" id="chpan">
            <table id="tablapan" style="margin-left: 15px;" width="700">
                <tr>
                    <td class="pasoheader" colspan="4">Paso 1: Elige tu Pan</td>
                </tr>
                <tr class="pasoingrediente">
                    <td>Sólo</td>
                    <td>Con Sésamo</td>
                    <td>Semilla de Amapola</td>
                    <td>Con Cereáles</td>
                </tr>
                <tr class="pasoingrediente">
                    <td><img src="images/pansolo.gif" alt="Icono Ingrediente"></td>
                    <td><img src="images/pansesamo.gif" alt="Icono Ingrediente"></td>
                    <td><img src="images/panamapola.gif" alt="Icono Ingrediente"></td>
                    <td><img src="images/pancereales.gif" alt="Icono Ingrediente"></td>
                </tr>
                <tr class="pasoingrediente">
                    <td class="pasoingredienteprecio">0,50&nbsp;</td>
                    <td class="pasoingredienteprecio">0,60&nbsp;</td>
                    <td class="pasoingredienteprecio">0,70&nbsp;</td>
                    <td class="pasoingredienteprecio">0,75&nbsp;</td>
                </tr>
                <tr class="pasoingrediente">
                    <td><input name="panes" type="checkbox" id="chpan1" onclick="incremento('Pan Sólo','0,50','pan1');"></td>
                    <td><input name="panes" type="checkbox" id="chpan2" onclick="incremento('Pan con Sésamo','0,60','pan2');"></td>
                    <td><input name="panes" type="checkbox" id="chpan3" onclick="incremento('Pan Semilla de Amapola','0,70','pan3');"></td>
                    <td><input name="panes" type="checkbox" id="chpan4" onclick="incremento('Pan con Cereales','0,75','pan4');"></td>
                </tr>
            </table>
        </form> 
Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 24/01/2013, 07:54
 
Fecha de Ingreso: agosto-2011
Mensajes: 2
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Crear/eliminar elementos "li" desde Checkboxes

El error estaba en que creaba un "ul" y dentro de este un "li". Después borraba el "li" pero no borraba el "ul".
El código correcto termina así;

}else{
var padre = document.getElementById('contenedorpedido');
padre.removeChild(document.getElementById('ul'+id) );
}
}

Lo dejo por si le sirve a alguien.
Saludos!

Etiquetas: checkboxes, elementos, funcion, html, input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:32.