1

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>&nbsp;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>&nbsp;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>

16
  • 1
    id es global porque dices que actúa de manera local?
    – FranAcuna
    el 23 mar. 2021 a las 19:29
  • @FranAcuna porque en el ejemplo si elimino algún elemento, este no resta el id global, y ya no se pueden crear 4 elementos
    – Javier
    el 23 mar. 2021 a las 19:34
  • Eso no será por ese has ocultado el botón?
    – Christian
    el 23 mar. 2021 a las 19:55
  • @christian claro, pero si te fijas en el ejemplo, si le das al botón Agregar se crea el label "Ejemplo 1", luego elimínalo, y vuelve a cliquear el botón Agregar, éste te crea el label "Ejemplo 2", pero debiese ser "Ejemplo 1". (Por lo que quiere decir que no se va restando el id).
    – Javier
    el 23 mar. 2021 a las 20:00
  • @Javier El id si disminuye, lo sé por la consola. el 23 mar. 2021 a las 20:13

2 respuestas 2

2

le hice 2 cambios a tu código:

  1. Hice una función global que se llama "mostrar" que es la que evalúa si se muestra el botón o no, y la llamo tanto al agregar una sección como al eliminarla.
  2. La rutina de borrado hice que no dependa del "id" para eliminar el contenido, mejor accede 3 niveles hacia arriba y limpia el contenido de la sección. No es muy bonito, pero es rápido y puedes eliminar las secciones en el orden que quieras.

const btn_agregar = document.getElementById("btn_add");
var id = 0;

function mostrar(){
  btn_agregar.setAttribute("style", id == 4 ? "visibility:hidden" : "visibility:visible");
}

btn_agregar.onclick = function() {
  id++;

  $(document).on('click', '#btn_delete' + id, function() {
    $(this.parentElement.parentElement.parentElement).html("");
    id--;
    mostrar(); // evalúas y muestras aquí
  });

  mostrar();

  $(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>&nbsp;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>&nbsp;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>

1

estas removiendo todo el section por eso te sale ese error lo corecto seria eliminar solo el contenido del section, lo cual quedaría así

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("div" + 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="row" id="div'+id+'">' +
      '<div class="form-row mt-4">' +
      '<div class="col-12 col-sm-6 mt-4 mt-sm-0">' +
      '<label>&nbsp;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>' +
      '</div>'
    );
    $("#section" + id).append($section);
  });
}
5
  • creo que lo mejor seria seleccionar el hijo de section y eliminarlo a el, ya que si haces referencia a un elemento dentro de el y lo eliminas luego tendras un error
    – Christian
    el 24 mar. 2021 a las 1:06
  • pero los hijos del section tambien son elementos que tendría que eliminar no veo la diferencia el 24 mar. 2021 a las 1:15
  • si haces var el = document.getElementById("section"+id) y luego seleccionas a sus hijos el.children te devuelve un HTMLCollection y en caso no tenga hijos te lo devuelve vacio
    – Christian
    el 24 mar. 2021 a las 1:22
  • y luego como lo eliminas o remueves el 24 mar. 2021 a las 1:29
  • buen punto no habia tomado eso en cuenta, disculpa, pero igual considero que seria mejor acceder a su hijo asi evitas llamar al elemento y posibles errores si se manipula el html
    – Christian
    el 24 mar. 2021 a las 1:35

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.