tengo éste código el cual puedo agregar elementos, lo que quiero realizar es el poder eliminarlos, actualmente los puedo eliminar, pero surge un problema ya que solo doy la opción de crear 4 elementos:
if (id == 4) {
btn_agregar.setAttribute("style", "visibility:hidden");
}
El problema surge al eliminar lo que hago es restarle al contador id--
, pero solo se resta dentro de la función y no globalmente, entonces mi duda es como puedo hacer aquello y que se replique en la función "global".
Aquí dejo el código completo:
const btn_agregar = document.getElementById("btn_add");
var id = 0;
btn_agregar.onclick = function() {
id++;
$(document).on('click', '#btn_delete' + id, function() {
var section = document.getElementById("section" + id);
section.remove();
id--;
console.log(id);
});
if (id == 4) {
btn_agregar.setAttribute("style", "visibility:hidden");
}
$(document).on('click', '#btn_add', function() {
$("#section" + id).html("");
var $section = $(
'<hr>' +
'<div class="form-row mt-4">' +
'<div class="col-12 col-sm-6 mt-4 mt-sm-0">' +
'<label> Ejemplo' + id + '</label>' +
'</div>' +
'</div>' +
'<div class="form-row mt-4">' +
'<div class="col">' +
'<button type="button" id="btn_delete' + id + '" class="btn btn-link float-left" style="color: #E53212">Eliminar [-]</button>' +
'</div>' +
'</div>'
);
$("#section" + id).append($section);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row mt-4">
<div class="col-12 col-sm-6 mt-4 mt-sm-0">
<label> Ejemplo</label>
</div>
</div>
<div id="section_activos"></div>
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
<div class="form-row mt-4">
<div class="col">
<button type="button" id="btn_add" class="btn btn-link float-right">Agregar [+]</button>
</div>
</div>
id
es global porque dices que actúa de manera local?id
si disminuye, lo sé por la consola.