1

Mi duda es la siguiente, genero un input tipo numerico, y dos botones, estos hacen la función de agregar y de eliminar el renglon sea el caso.

Ya conseguí agregar y eliminar los renglones, también ocultar uno de los botones(el de agregar). Ahora lo único que no puedo hacer es ocultar el botón de eliminar, para así dejar activo los dos últimos botones. Agradezco su ayuda.

<form>
  <p class="nth" style="display: inline-block;">Agregar</p>
  <button class="agregar">+</button>
  <div class="inputs"></div>
  <input type="hidden" value name="edades" class="edad_hidden"></input>         
</form>

El jquery

<script type="text/javascript">
        var ctr = 0;
        var ctr_bdra = 0;
        var init = 0;
        var contenedor = $(".inputs");
        var edad = $(".edad_hidden");
        var edades;

        $(".agregar").click(function(e){            
            add_control(contenedor);
            $(".agregar, .nth").hide(); 
            e.preventDefault();

        });

        /*$(".submit").click(function(e){
            edades = $(".inputs input.ed").map(function() {
                 return $(this).attr('value');
              }).get();
            edad.attr('value', edades);
            //console.log(edad.attr("value"));
            e.preventDefault();
        });*/

        $(document).on('click', 'button.agregar_in', function(e){ 
            if($(".ed").val() == "")
            {
                return false;

            }else{
                add_control(contenedor);
                ctr_bdra = 1;
                if(ctr_bdra > 0){
                    $(this).hide();
                }

            }
            e.preventDefault();

        });

        $(document).on('click', 'button.eliminar_in', function(e){ 
            array = $(".edad_hidden").val().split(',');
            array.pop();
            $(".edad_hidden").val(array);
            var node = $(this).parent();
            node.remove();
            if(!$(".btun").is(":visible")){
                $(".agregar, .nth").show();
            }           
            $('button.agregar_in').last().show();
            e.preventDefault();
        });

        $(document).on('keyup','.ed', function() {
            var info = [];
            $('.ed').each(function(){ info.push($(this).val()); });
            $(".edad_hidden").val(info);
        });


        function add_control(contenedor){
            ctr = ctr + 1;
            contenedor.append('<div class="btun"><input type="number" min="0" class="ed" value=""  id="tb' + ctr + '' +'"/>'+
                              '<button class="agregar_in">+</button>'+
                              '<button class="eliminar_in">-</button></div>');
        }
    </script>

1 respuesta 1

2

Si entendí bien el problema, simplemente puedes "duplicar" los comportamientos que ya estás usando para mostrar/eliminar los botones, aunque sería bueno hacer un pequeño refactoring del código:

        var ctr = 0;
        var ctr_bdra = 0;
        var init = 0;
        var contenedor = $(".inputs");
        var edad = $(".edad_hidden");
        var edades;

        $(".agregar").click(function(e){            
            add_control(contenedor);
            $(".agregar, .nth").hide(); 
            e.preventDefault();

        });


        $(document).on('click', 'button.agregar_in', function(e){
            if($(".ed").val() == "")
            {
                return false;

            }else{
                add_control(contenedor);
                ctr_bdra = 1;
                if(ctr_bdra > 0){
                    $(this).hide();
                    // NUEVO: ocultar el siguiente elemento (el botón de eliminar)
                    $(this).next().hide();
                }

            }
            e.preventDefault();

        });

        $(document).on('click', 'button.eliminar_in', function(e){ 
            array = $(".edad_hidden").val().split(',');
            array.pop();
            $(".edad_hidden").val(array);
            var node = $(this).parent();
            node.remove();
            if(!$(".btun").is(":visible")){
                $(".agregar, .nth").show();
            }           
            $('button.agregar_in').last().show();
            // NUEVO: Mostrar botón de eliminar cuando se elimina una línea
            $('button.eliminar_in').last().show();
            e.preventDefault();
        });

        $(document).on('keyup','.ed', function() {
            var info = [];
            $('.ed').each(function(){ info.push($(this).val()); });
            $(".edad_hidden").val(info);
        });


        function add_control(contenedor){
            ctr = ctr + 1;
            contenedor.append('<div class="btun"><input type="number" min="0" class="ed" value=""  id="tb' + ctr + '' +'"/>'+
                              '<button class="agregar_in">+</button>'+
                              '<button class="eliminar_in">-</button></div>');
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p class="nth" style="display: inline-block;">Agregar</p>
  <button class="agregar">+</button>
  <div class="inputs"></div>
  <input type="hidden" value name="edades" class="edad_hidden"></input>         
</form>

1
  • Gracias ha funcionado :D
    – cignius
    el 5 sep. 2016 a las 13:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.