Tengo el siguiente problema, tengo una lista de elementos con diferentes id (simula ser una lista dinámica donde los datos viene de una base), y debo activar el botón de eliminar. Mi solución fue la siguiente:
$( "#button" ).click(function() {
$( this ).closest('section').addClass('btn-remove');
});
Aqui el html
<section class="row mt-3 mb-3 reg" id="1">
<div class="col-1 text-center align-self-center" div>
<p>01/06/19</p>
</div>
<div class="col-lg-3 col-md-4 text-center align-self-center">
<p>Martin</p>
</div>
<div class="col-2 text-center align-self-center">
<p>32654065</p>
</div>
<div class="col-3 text-center align-self-center">
<p>3794254368</p>
</div>
<div class="col-1 text-center align-self-center">
<p>01/07/96</p>
</div>
<div class="col-lg-1 col-md-6 text-center align-self-center">
<button class="btn btn-primary" type="button" id="button">Eliminar</button>
</div>
<div class="col-lg-1 col-md-6 text-center align-self-center">
<button class="btn btn-primary" type="button" id="accion"><a href="#">Atendido</a></button>
</div>
</section>
<section class="row mt-3 mb-3 reg" id="2">
<div class="col-1 text-center align-self-center" div>
<p>05/03/12</p>
</div>
<div class="col-lg-3 col-md-4 text-center align-self-center">
<p>Damian</p>
</div>
<div class="col-2 text-center align-self-center">
<p>21143056</p>
</div>
<div class="col-3 text-center align-self-center">
<p>3794213567</p>
</div>
<div class="col-1 text-center align-self-center">
<p>03/12/89</p>
</div>
<div class="col-lg-1 col-md-6 text-center align-self-center">
<button class="btn btn-primary" type="button" id="button">Eliminar</button>
</div>
<div class="col-lg-1 col-md-6 text-center align-self-center">
<button class="btn btn-primary" type="button" id="accion"><a href="#">Atendido</a></button>
</div>
</section>
Mi problema es que el botón solo reacciona con el primero, en este caso el paciente denominado "Martin".
Lo único que hace el botón es añadir la siguiente clase display:none
id
que se repiten, esto no es valido, es incorrecto. Si necesitar agruparlos de algún modo puedes usar una clase para los botones. El selector $("#ID") te devuelve el primer elemento y el único que debería de tener eseid
. Ademas de esto no es lo mismo eliminar que ocultar, para eliminar un elemento puedes usar.remove()