Eliminar cierta cantidad de divs

lgza70 · #1 (**permalink**) 07/01/2012, 16:08

Hola, soy nueva en este lenguaje y tengo un select con números que clonan un div dependiendo del número seleccionado, si vuelvo a seleccionar de ese mismo select otro número y es un número mayor al seleccionado anteriormente, ya me pone exactamente la cantidad que elija, pero si selecciono después un número menor me gustaría poder quitar los divs que son para que sean de el mismo número seleccionado, que ya tengo en "restaDos" el número que se debe eliminar, pero se puede indicar en algún lado que quiero que me quite esa cantidad?

o hay una mejor forma de hacerlo?

Agradecería bastante cualquier ayuda!

Aquí está mi código:

$(document).ready(function(){

$('#empleados').change(function() {

var contador = $(this).val(),

nuevosDiv = $('#detalles');
n = $('div #detalles').length;
resta= n - contador;
restaDos= contador - n;

//Aquí es mi duda, esto no funciona, me quita de uno en uno
if(n > contador) {

for (var i = 0; i < resta; i++) {
nuevosDiv.remove();
}

}

else {
//Esto si funciona perfectamente
for (var i = 0; i < restaDos; i++) {

nuevosDiv.clone().insertAfter(nuevosDiv);
}

}
});

lgza70 · #2 (**permalink**) 07/01/2012, 18:20

Hola, soy nueva en este lenguaje y tengo un select con números que clonan un div dependiendo del número seleccionado, si vuelvo a seleccionar de ese mismo select otro número y es un número mayor al seleccionado anteriormente, ya me pone exactamente la cantidad que elija, pero si selecciono después un número menor me gustaría poder quitar los divs que son para que sean de el mismo número seleccionado, que ya tengo en "restaDos" el número que se debe eliminar, pero se puede indicar en algún lado que quiero que me quite esa cantidad?

o hay una mejor forma de hacerlo?

Agradecería bastante cualquier ayuda!

Aquí está mi código:

$(document).ready(function(){

$('#empleados').change(function() {

var contador = $(this).val(),

nuevosDiv = $('#detalles');
n = $('div #detalles').length;
resta= n - contador;
restaDos= contador - n;

//Aquí es mi duda, esto no funciona, me quita de uno en uno
if(n > contador) {

for (var i = 0; i < resta; i++) {
nuevosDiv.remove();
}

}

else {
//Esto si funciona perfectamente
for (var i = 0; i < restaDos; i++) {

nuevosDiv.clone().insertAfter(nuevosDiv);
}

}
});

alejandromg · #3 (**permalink**) 07/01/2012, 22:51

Ya que estas usando jQuery lo más fácil seria tener destinada una div como el espacio para los nuevos.

Código HTML:

Ver original<select id="empleados"> 
  <option> 1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<div id="clones">
  <div id="detalles">Hola</div>
</div>

Código Javascript:

Ver original$(document).ready(function(){
    $('#empleados').change(function() {
      var contador  = $(this).val(),
          nuevosDiv = $('#detalles'),
          n         = $('div #detalles').length,
          resta     = n - contador,
          restaDos  = contador - n;
 
      // Aquí  ubicas el último div y lo remueves usando el selector :last-child o :last en mi caso
      if(n > contador) {
        for (var i = 0; i < resta; i++) {
          $('#clones div:last').remove()
        }
      } else {
        for (var i = 0; i < restaDos; i++) {
          nuevosDiv.clone().insertAfter(nuevosDiv);
        }
      }
    });
  });

Esto deberia de funcionar, ya que estas "clonando", lo mejor es que todos tus clones esten dentro de un contenedor ("#clones"), luego solo eliminas el último de los miembros.

Saludos y buena suerte aprendiendo js :)

#4 (**permalink**) 08/01/2012, 01:21

Ok me gusta que uses JQuery, esta es mi solución

Código HTML:

Ver original<html>
    <head>
        <script src="jquery.js"></script>
        <script>
            $(function(){
                $("#id_select").change(function(){
                    $("#padre div").remove();
                    
                    for(i=0; i < $(this).val(); i++ ){
                        console.debug("dd");
                        html = "<div>DIV INSERTADO</div>";
                        $("#padre").append(html);
                    }
                })
            })  
        </script>
    </head>
    
    <body>
        <select id="id_select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        
        <div id="padre">
            
        </div>
    </body>
</html>

lgza70 · #5 (**permalink**) 08/01/2012, 23:09

Excelente! exactamente lo que necesitaba... Muchísimas gracias de nuevo =)

lgza70 · #6 (**permalink**) 08/01/2012, 23:26

Ah mira no andaba taaaan perdida tampoco! jaja si funciona!! En verdad te agradezco el tomarte el tiempo de resolver mi problema =) muchísimas gracias!