0

Tengo una lista que crea sus li de forma dinámica, obtienen el valor que da el usuario, además cada uno tiene un check. Mi intención es eliminar cada li que tenga un check. Por ahora funciona casi al 100% pero tiene un bug: si seleccionas más de un check no elimina todos.

Mi código:

    <ul id="dynamic-list"></ul>

    <input type="text" id="introField"/>
    <button onclick="addItem()">add item</button>
    <button onclick="removeItem()">remove item</button>

<script>
var ul = document.getElementById("dynamic-list");
var userEntry = document.getElementById("introField");

function addItem(){

  var li = document.createElement("li");
  var check = document.createElement("input");
  check.type = "checkbox";
  var items = document.querySelectorAll('#dynamic-list li');
  ul.appendChild(li);
  li.appendChild(check);

  for (i = 0; i < items.length; i++) {
    li.setAttribute('id','box'+[i]);
    li.setAttribute('class','item');
    check.setAttribute('class','chk');
    li.appendChild(document.createTextNode(userEntry.value));
  }
}

function removeItem(){
    var items = document.querySelectorAll('#dynamic-list li');
    var box = document.getElementsByClassName('chk');

    for(i = 0; i < items.length; i++) {
      if (box.checked==true){
        items[i].parentNode.removeChild(items[i]);
      }
    }
}
</script>
0

1 respuesta 1

0

El error que tienes es que document.getElementsByClassName() devuelve un array de elementos, no uno solo. Entonces en el for debes acceder al box correspondiente.

function removeItem(){
    var items = document.querySelectorAll('#dynamic-list li');
    var box = document.getElementsByClassName('chk');

    for(i = 0; i < items.length; i++) {
      if (box[i].checked==true){
        items[i].parentNode.removeChild(items[i]);
      }
    }
}

Así debería estar arreglado. Por cierto, ya que tienes una variable con el ul, puedes usar el siguiente código en lugar de querySelector() para obtener sus elementos hijos, que son todos li.

 var items = ul.children;

Tu Respuesta

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

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