Foros del Web » Programando para Internet » Javascript »

borrar div dinamicamente

 Estas en el tema de borrar div dinamicamente en el foro de Javascript en Foros del Web. Hola!, os esplico mi problema. Tengo un formulario y en el un checkbox: Código HTML: <input name= "estilo" onclick= "num89++;crear5(this)" type= "checkbox" value= "" /> ...
  #1 (permalink)  
Antiguo 08/02/2010, 06:58
 
Fecha de Ingreso: enero-2009
Mensajes: 23
Antigüedad: 15 años, 10 meses
Puntos: 0
borrar div dinamicamente
Hola!, os esplico mi problema.
Tengo un formulario y en el un checkbox:

Código HTML:
<input name="estilo" onclick="num89++;crear5(this)" type="checkbox" value="" />
Al hacer click en el llamo a crear 5 y esta funcion lo que hace es:
1.- comprueba que num89 sea impar, para saber que el check esta checkeado.
2.-crea un select, un text area un boton añadir y un boton borrar en un div llamado fiel5.
3.- en el caso de que num89 sea par (osea se deselecciona el checkbox), se borran los nuevos elementos.

El problema es solo el paso 3, el resto funciona.

Código: 
  function crear5(obj) {

	if(num89%2 == 1) {       /*paso 1*/
		if (num5 <= 9) {
   			num5++;
  			fi5 = document.getElementById('fiel5');         /*paso 2*/
  			contenedor5 = document.createElement('div'); 
  			contenedor5.id = 'div'+num5; 
  			fi5.appendChild(contenedor5);
			ele5 = document.createElement('select'); 
			ele5.className = 'impCol';
  			ele5.length = 4;
  			variable = new Option("Ser","0");
		  	ele5.options[0] = variable;
		  	variable = new Option("Ser1","1");
		  	ele5.options[1] = variable;
		  	variable = new Option("Ser2","2");
		  	ele5.options[2] = variable;
		  	variable = new Option("ser3","3");
		  	ele5.options[3] = variable; 
		  	contenedor5.appendChild(ele5);
		  	ele5 = document.createElement('input');
		  	ele5.type = 'button'; 
		  	ele5.value = 'Añadir';
		  	ele5.name = 'div'+num5; 
		  	ele5.className ='impCol';
		  	ele5.onclick = function () {num89=1;crear5(this);num89=2} 
		  	contenedor5.appendChild(ele5);
		  	ele5 = document.createElement('input');
		  	ele5.type = 'button'; 
		  	ele5.value = 'Borrar';
		  	ele5.name = 'div'+num5; 
		  	ele5.className ='impCol';
		  	ele5.onclick = function () {borrar5(this.name)} 
		  	contenedor5.appendChild(ele5); 
		  	ele5 = document.createElement('textarea'); 
		  	ele5.className = 'impCol';
		  	ele5.cols =100;
		  	ele5.rows	= 4;
		  	ele5.maxlength =2000;
		  	contenedor5.appendChild(ele5);
 		}else{
 			alert('maximo de 10 servidores');
 		}	
 	}else if(num89%2 == 0) {                  /*paso 3 donde se encuentra el error*/
  		var i ;
 		for (i=0;i<=num5;i++) {
   			fi5 = document.getElementById('fiel5'); 
  			fi5.removeChild(document.getElementById('div'+num5));
		}
	
	} 
}
function borrar5(obj) {
	num5--;
        fi5 = document.getElementById('fiel5');  
        fi5.removeChild(document.getElementById(obj)); 
}
Supongo que debo estar haciendo algo mal o muy mal, pues en js soy bastante novato y ando algo perdido.
Gracias de antemano por la ayuda!
  #2 (permalink)  
Antiguo 08/02/2010, 08:03
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: borrar div dinamicamente
Esto perece que funciona??? No entiendo lo que te pasa...

Por cierto

Si obj es un checkbox luego puedes hacer

if (obj.checked) ... true si esta checkeado false si no lo esta

Quim

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Documento sin t&iacute;tulo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript" type="text/JavaScript"> 
  7. var num89=0; 
  8. var num5=0; 
  9. function crear5(obj) {
  10.     if(num89%2 == 1) {       /*paso 1*/
  11.         if (num5 <= 9) {
  12.             num5++;
  13.             fi5 = document.getElementById('fiel5');         /*paso 2*/
  14.             contenedor5 = document.createElement('div'); 
  15.             contenedor5.id = 'div'+num5; 
  16.             fi5.appendChild(contenedor5);
  17.             ele5 = document.createElement('select'); 
  18.             ele5.className = 'impCol';
  19.             ele5.length = 4;
  20.             variable = new Option("Ser","0");
  21.             ele5.options[0] = variable;
  22.             variable = new Option("Ser1","1");
  23.             ele5.options[1] = variable;
  24.             variable = new Option("Ser2","2");
  25.             ele5.options[2] = variable;
  26.             variable = new Option("ser3","3");
  27.             ele5.options[3] = variable; 
  28.             contenedor5.appendChild(ele5);
  29.             ele5 = document.createElement('input');
  30.             ele5.type = 'button'; 
  31.             ele5.value = 'Añadir';
  32.             ele5.name = 'div'+num5; 
  33.             ele5.className ='impCol';
  34.             ele5.onclick = function () {num89=1;crear5(this);num89=2} 
  35.             contenedor5.appendChild(ele5);
  36.             ele5 = document.createElement('input');
  37.             ele5.type = 'button'; 
  38.             ele5.value = 'Borrar';
  39.             ele5.name = 'div'+num5; 
  40.             ele5.className ='impCol';
  41.             ele5.onclick = function () {borrar5(this.name)} 
  42.             contenedor5.appendChild(ele5); 
  43.             ele5 = document.createElement('textarea'); 
  44.             ele5.className = 'impCol';
  45.             ele5.cols =100;
  46.             ele5.rows   = 4;
  47.             ele5.maxlength =2000;
  48.             contenedor5.appendChild(ele5);
  49.         }else{
  50.             alert('maximo de 10 servidores');
  51.         }   
  52.     }else if(num89%2 == 0) {                  /*paso 3 donde se encuentra el error*/
  53.         var i ;
  54.         for (i=0;i<=num5;i++) {
  55.             fi5 = document.getElementById('fiel5'); 
  56.             fi5.removeChild(document.getElementById('div'+num5));
  57.         }
  58.     
  59.     } 
  60. }
  61. function borrar5(obj) {
  62.     num5--;
  63.         fi5 = document.getElementById('fiel5');  
  64.         fi5.removeChild(document.getElementById(obj)); 
  65. }
  66. </script>
  67. </head>
  68. <body>
  69. <input name="estilo" onclick="num89++;crear5(this)" type="checkbox" value="" />
  70. <div id="fiel5"></div>
  71. </body>
  72. </html>
  #3 (permalink)  
Antiguo 08/02/2010, 08:24
 
Fecha de Ingreso: enero-2009
Mensajes: 23
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: borrar div dinamicamente
Para empezar gracias por esto:

Cita:
if (obj.checked)
sabia que tenia que poder hacerse de otra forma pero no daba con ello.

Funcionar funciona, borra uno(se lia un poco con el tema de borrarlos y añadirlos si lo haces mucho pero creo q usando el obj,checked eso lo solucionare rapido), el tema es que quiero que borre todos los elementos añadidos no solo el último, de ahí que use un for. Ese es realmente el problema.

Edito....
asi queda con tu linea, soluciona algun fallo que tenia, pero sigue siendo lo mismo solo borra el último, tambien he observado que solo borra tras haber añadido, pero no tras borrar uno, solo coge la última id creada.

Además borra uno, pero firebug me tira error tras borrar, aunque sigue funcionando pero me dice que en la linea: fi5 = document.getElementById('fiel5'); /*aqui*/ hay un invalid pointer

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
var num89=0;
var num5=0; 
  function crear5(obj) {
	if((obj.checked) || (num89 ==1)) {       /*paso 1*/
		if (num5 <= 9) {
     			fi5 = document.getElementById('fiel5');         /*paso 2*/
  			contenedor5 = document.createElement('div'); 
  			contenedor5.id = 'div'+num5; 
  			fi5.appendChild(contenedor5);
			ele5 = document.createElement('select'); 
			ele5.className = 'impCol';
  			ele5.length = 4;
  			variable = new Option("Ser","0");
		  	ele5.options[0] = variable;
		  	variable = new Option("Ser1","1");
		  	ele5.options[1] = variable;
		  	variable = new Option("Ser2","2");
		  	ele5.options[2] = variable;
		  	variable = new Option("ser3","3");
		  	ele5.options[3] = variable; 
		  	contenedor5.appendChild(ele5);
		  	ele5 = document.createElement('input');
		  	ele5.type = 'button'; 
		  	ele5.value = 'Añadir';
		  	ele5.name = 'div'+num5; 
		  	ele5.className ='impCol';
		  	ele5.onclick = function () {num89=1;num5++;crear5(this);num89=0} 
		  	contenedor5.appendChild(ele5);
		  	ele5 = document.createElement('input');
		  	ele5.type = 'button'; 
		  	ele5.value = 'Borrar';
		  	ele5.name = 'div'+num5; 
		  	ele5.className ='impCol';
		  	ele5.onclick = function () {num89=1;borrar5(this.name);num89=0} 
		  	contenedor5.appendChild(ele5); 
		  	ele5 = document.createElement('textarea'); 
		  	ele5.className = 'impCol';
		  	ele5.cols =100;
		  	ele5.rows	= 4;
		  	ele5.maxlength =2000;
		  	contenedor5.appendChild(ele5);
 		}else{
 			alert('maximo de 10 servidores');
 		}	
 	}else  {                  /*paso 3 donde se encuentra el error*/
  		var i ;
 		for (i=0;i<=num5;i++) {
   			fi5 = document.getElementById('fiel5');  /*aqui*/
  			fi5.removeChild(document.getElementById('div'+num5));
		}
	
	} 
}
function borrar5(obj) {
	num5--;
        fi5 = document.getElementById('fiel5');  
        fi5.removeChild(document.getElementById(obj)); 
}
</script>
</head>
<body>
<input name="estilo" onclick="num89++;crear5(this)" type="checkbox" value="" />
<div id="fiel5"></div>
</body>
</html>
Última edición por molinos; 08/02/2010 a las 08:55
  #4 (permalink)  
Antiguo 09/02/2010, 03:19
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: borrar div dinamicamente
He cambiado un poco tu estrategia, tenias un problema al intentar acceder secuencialmente a algo que podia no ser secuencial...

Analizalo si no lo entiendes pregunta, se trata de aprender no de que te lo den hecho.

Quim

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Documento sin t&iacute;tulo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript" type="text/JavaScript">
  7.  
  8. var num5=0;
  9. var divs=new Array();
  10.  
  11. function crear5(obj) {
  12.     if(obj.checked) {
  13.              creaObjetos();
  14.     }else{
  15.              borrarTodos();
  16.     } 
  17. }
  18.  
  19. function borrarTodos(){
  20.         for (var i=0;i<divs.length;i++) {
  21.             fi5 = document.getElementById('fiel5');
  22.             fi5.removeChild(document.getElementById(divs[i]));
  23.         }
  24.         divs.splice(0,divs.length);
  25. }
  26.  
  27. function borrar5(obj) {
  28.      for (var i=0;i<divs.length;i++){
  29.         if (divs[i]==obj){
  30.             fi5 = document.getElementById('fiel5');  
  31.             fi5.removeChild(document.getElementById(obj)); 
  32.             break;
  33.         }
  34.         }
  35.     divs.splice(i,1);
  36.     if (divs.length==0) document.getElementById('estilo').checked=false;
  37. }
  38.  
  39. function creaObjetos(){
  40.         if (divs.length <= 9) {
  41.             num5++;
  42.             fi5 = document.getElementById('fiel5');
  43.             contenedor5 = document.createElement('div'); 
  44.             contenedor5.id = 'div'+num5; 
  45.             fi5.appendChild(contenedor5);
  46.             ele5 = document.createElement('select'); 
  47.             ele5.className = 'impCol';
  48.             ele5.length = 4;
  49.             variable = new Option("Ser","0");
  50.             ele5.options[0] = variable;
  51.             variable = new Option("Ser1","1");
  52.             ele5.options[1] = variable;
  53.             variable = new Option("Ser2","2");
  54.             ele5.options[2] = variable;
  55.             variable = new Option("ser3","3");
  56.             ele5.options[3] = variable; 
  57.             contenedor5.appendChild(ele5);
  58.             ele5 = document.createElement('input');
  59.             ele5.type = 'button'; 
  60.             ele5.value = 'Añadir';
  61.             ele5.name = 'div'+num5; 
  62.             ele5.className ='impCol';
  63.             ele5.onclick = function () {creaObjetos();} 
  64.             contenedor5.appendChild(ele5);
  65.             ele5 = document.createElement('input');
  66.             ele5.type = 'button'; 
  67.             ele5.value = 'Borrar';
  68.             ele5.name = 'div'+num5; 
  69.             ele5.className ='impCol';
  70.             ele5.onclick = function () {borrar5(this.name);} 
  71.             contenedor5.appendChild(ele5); 
  72.             ele5 = document.createElement('textarea'); 
  73.             ele5.className = 'impCol';
  74.             ele5.cols =100;
  75.             ele5.rows   = 4;
  76.             ele5.maxlength =2000;
  77.             contenedor5.appendChild(ele5);
  78.             divs.push('div'+num5);
  79.         }else{
  80.             alert('maximo de 10 servidores');
  81.         }   
  82. }
  83.  
  84.  
  85. </script>
  86. </head>
  87. <body>
  88. <input name="estilo" id="estilo" onclick="crear5(this)" type="checkbox" value="" />
  89. <div id="fiel5"></div>
  90. </body>
  91. </html>
Última edición por quimfv; 09/02/2010 a las 03:22 Razón: elimino var num89=0;

Etiquetas: borrar, dinamicamente
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:19.