Add a class to elements except the last

Question

Add a class to elements except the last

Navigation

#1 by (1 votes)

2

I have divs that are generated dynamically with a button. You can now generate them with the following script:

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

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

So far so good, now this, as you can see, generates two buttons.

My question is, how can I disable the button with the class agregar_in that I generate if I give two or more times click, that is,

<button class="agregar">+</button>
<div class="inputs"></div>
<div class="btun">
        <input type="text" class="e" value id="tb1">
        <button class="agregar_in">+</button>
        <button class="eliminar_in">-</button>
</div>
<div class="btun">
        <input type="text" class="e" value id="tb2">
        <button class="agregar_in">+</button>
        <button class="eliminar_in">-</button>
</div>

In this case, it would be the one after tb1 (disable)

jquery html

asked by cignius 31.08.2016 в 15:00

source

1 answer

Apply class when firing mouseenter individually Why does it stop working?

score 1 · Accepted Answer

Your example is incomplete but I think the solution is close to this code that I put to you.

First to disable the button you do it by adding the attribute disabled but to select the correct one (according to the last question) you must use the selector :last

$(".agregar_in:last").attr("disabled", "disabled");

You should also remember that if you disabled one before you must re-enable it

$(".agregar_in").removeAttr("disabled");

This is the code

$(function() {
  var ctr = 0;
  var contenedor = $('#contenedor');

  $(".agregar").click(function(e) {
    add_control(contenedor);
    //$(".agregar, .nth").hide();
    e.preventDefault();
    $(".agregar_in").removeAttr("disabled");
    $(".agregar_in:last").attr("disabled", "disabled");
  });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor">
  <button class="agregar">Agregar boton</button>

</div>

If you only want to enable the latter, use the selector :not together with :last

$(function() {
  var ctr = 0;
  var contenedor = $('#contenedor');

  $(".agregar").click(function(e) {
    add_control(contenedor);
    //$(".agregar, .nth").hide();
    e.preventDefault();
    $(".agregar_in").removeAttr("disabled");
    $(".agregar_in:not(:last)").attr("disabled", "disabled");
  });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor">
  <button class="agregar">Agregar boton</button>

</div>