Problema al borrar divs dinamicamente

[sqa212]

Estoy intentando borrar un número desconocido de divs cuyos id empiecen por Box_ excepto uno llamado Box_0.

En el codigo que he puesto estan como valores seleccionados:

Box_0 = A
Box_1 = B
Box_2 = C
Box_3 = D
Box_4 = E
Box_5 = F

El problema es que solo se borran aquellos que he puesto de color verde, pero quisiera que se borraran tambien los que he puesto de color rojo. ¿Que estoy haciendo mal?


<script language="javascript">
function BorrarBOX(){
capas=document.getElementsByTagName('div');
for (i=0;i<capas.length;i++){
if(capas[i].id.indexOf('Box_') != -1){

if((capas[i].id)!='Box_0'){ //Para que no borre el 'Box_0'

capas[i].parentNode.removeChild(capas[i]);
}

}
}
}
</script>


<FORM name="formulario" action="pagina.html" method="post">
<DIV style='WIDTH: 365px' id='BoxContenedor'>
<DIV id='Box_0'>
<DIV style='WIDTH: 100%'>
<SELECT name='despegable0'><OPTION value='1' selected='selected'>A</OPTION><OPTION value='2'>B</OPTION><OPTION value='3'>C</OPTION><OPTION value='4'>D</OPTION><OPTION value='5'>E</OPTION><OPTION value='6'>F</OPTION></SELECT>
</DIV>
</DIV>
<DIV id='Box_1'>
<DIV style='WIDTH: 100%'>
<SELECT id='despegable2'><OPTION value='1'>A</OPTION><OPTION value='2'>B</OPTION><OPTION value='3' selected='selected'>C</OPTION><OPTION value='4'>D</OPTION><OPTION value='5'>E</OPTION><OPTION value='6'>F</OPTION></SELECT>
</DIV>
</DIV>
<DIV id='Box_2'>
<DIV style='WIDTH: 100%'>
<SELECT id='despegable2'><OPTION value='1'>A</OPTION><OPTION value='2'>B</OPTION><OPTION value='3' selected='selected'>C</OPTION><OPTION value='4'>D</OPTION><OPTION value='5'>E</OPTION><OPTION value='6'>F</OPTION></SELECT>
</DIV>
</DIV>
<DIV id='Box_3'>
<DIV style='WIDTH: 100%'>
<SELECT id='despegable3'><OPTION value='1'>A</OPTION><OPTION value='2'>B</OPTION><OPTION value='3'>C</OPTION><OPTION value='4' selected='selected'>D</OPTION><OPTION value='5'>E</OPTION><OPTION value='6'>F</OPTION></SELECT>
</DIV>
</DIV>
<DIV id='Box_4'>
<DIV style='WIDTH: 100%'>
<SELECT id='despegable4'><OPTION value='1'>A</OPTION><OPTION value='2'>B</OPTION><OPTION value='3'>C</OPTION><OPTION value='4'>D</OPTION><OPTION value='5' selected='selected'>E</OPTION><OPTION value='6'>F</OPTION></SELECT>
</DIV>
</DIV>
<DIV id='Box_5'>
<DIV style='WIDTH: 100%'>
<SELECT id='despegable5'><OPTION value='1'>A</OPTION><OPTION value='2'>B</OPTION><OPTION value='3'>C</OPTION><OPTION value='4'>D</OPTION><OPTION value='5'>E</OPTION><OPTION value='6' selected='selected'>F</OPTION></SELECT>
</DIV>
</DIV>
</DIV>
</FORM>
<br />
<a href="javascript:void(0);" onClick="BorrarBOX();">Borrar BOXES()</a>

[zerokilled]

un tema similar http://www.forosdelweb.com/showthread.php?t=809045, lo unico que en tu caso tienes que adaptarlo un poco para que no borre los elementos que deseas dejar.

[_cronos2]

No sé por qué sólo te borra algunos, pero todos los atributos HTML deben llevar comillas, simples '' o dobles ""; por tanto id=Box_2 es incorrecto, debería ser id='Box_2', y así con todos los otros atributos (value, style, name...).
Por otro lado, los forms deben tener por lo menos tres atributos requeridos: name, method y action; los demás son opcionales (onsubmit, enctype, id...).

Saludos (:

[sqa212]

Hola _cronos2, he editado el ejemplo que subi para poner las comillas que comentas, pero sigue igual (lo he editado para no poner más codigo en el post).

Hola zerokilled he leido el post que me indicas pero sinceramente no sabría como adoptarlo, voy a seguir mirandol haber si alcanzo a entenderlo.

[Jokuto]

No se si estare repitiendo a alguien de arriba pero me da muuucha pereza leer a todos, mi recomendacion es esta:
function BorrarBOX(){
j=0;
while (document.getElementById('BOX_'+j)!=null){
//Mi intencion es que mire si existe el id BOX_1,2,3,4,5..... si es asi sumar 1 a j
j++;
}

for (i=1;i<j;i++){
document.getElementById('BOX_'+i).innerHTML='';

o

document.getElementById('BOX_'+i).style.display=no ne;
}

[sqa212]

Hola Jokuto, gracias por tu aportacion, probe tu codigo y me permitio ocultar el contenido de los elemetos, pero mi intencion era eliminarlos, creo que de esa forma no podria eliminar los elementos , lo consulte con un amigo y me dio esta solucion :

<script>
function BorrarBOX(){
var container=document.getElementById("BoxContenedor") ;
var capas=container.getElementsByTagName('div');
var aux=parseInt(capas.length/2);

for (i=0;i<aux-1;i++){
if(capas.item(2).id!=""){
container.removeChild(capas.item(2));
}
}
}
</script>