0

Como puedo eliminar un elemento de un div contenedor, además quisiera que me respondieran sin la ayuda de jquery y sin los métodos de evento en las etiquetas ya que recien estoy empezando con javascript.

let boton = document.querySelector(".boton")
let contenedor = document.getElementById("contenedor")
let enlace = document.getElementsByClassName(".enlace")

boton.addEventListener("click",() => {

    let li = document.createElement("li")
    li.innerHTML = "Contenido " + Math.random() + "<a class='enlace'>x</a>"

    contenedor.appendChild(li)
})

enlace.addEventListener("click",(e) => {
    e.target.parentNode.parentNode.removeChild(e.target.parentNode); //ACÁ ME SALE ERROR
}) 
body {
    font-size: sans-serif;
    max-width: 400px;
}
#contenedor li {
    padding: 18px;
    margin: 8px 0;
    background: #ddd;
    list-style: none;
}
#contenedor li a {
    cursor: pointer;
    float: right;
    padding: 3px 7px;
    background: #fbfbfb;
}
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <h1>Como agregar o eliminar elementos a una div</h1>

    <div id="contenedor">
        <li>Contenido 1<a>x</a></li>
        <li>Contenido 2<a>x</a></li>
    </div>

     <input class="boton" type="button" value="Agregar elemento" style="float: right;">

  </body>
</html>

2 respuestas 2

2

let boton = document.querySelector(".boton");
let contenedor = document.getElementById("contenedor");
let enlace = document.querySelector("a"); 

boton.addEventListener("click",() => {

let li = document.createElement("li");
li.innerHTML = "Contenido " + Math.random() + "<a class='enlace'> x</a>";

contenedor.appendChild(li);
})

// creamos un click al contenedor ya que se proparagara al cada elemento dentro
// nota: no se le aplica al "a" directamente ya que no existe al momento de cargar el documento por ser dinamicos
contenedor.addEventListener("click",(e) => {
  // validamos que el target sea el "a" 
  if (e.target.nodeName == "A") {
e.target.parentNode.parentNode.removeChild(e.target.parentNode); //ACÁ salia error proque el target era "a" que no es hijo de "div". es hijo de "li"
  }
})
body {
    font-size: sans-serif;
    max-width: 400px;
}
#contenedor li {
    padding: 18px;
    margin: 8px 0;
    background: #ddd;
    list-style: none;
}
#contenedor li a {
    cursor: pointer;
    float: right;
    padding: 3px 7px;
    background: #fbfbfb;
}
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <h1>Como agregar o eliminar elementos a una div</h1>

    <div id="contenedor">
        <li>Contenido 1<a>x</a></li>
        <li>Contenido 2<a>x</a></li>
    </div>

     <input class="boton" type="button" value="Agregar elemento" style="float: right;">

  </body>
</html>

1

Algo asi es lo que necesitas, el problema estaba en que estabas buscando en el elemento <a>eliminar su hijo

window.onload = () => {
  let boton = document.querySelector(".boton")
  let contenedor = document.getElementById("contenedor")
  let enlaces = document.getElementsByClassName("enlace")

  boton.addEventListener("click",() => {

      let li = document.createElement("li")
      li.innerHTML = "Contenido " + Math.random() + "<a class='enlace'>x</a>";

      contenedor.appendChild(li);
      
      // se llama nuevamente el evento para que le asigne a cada enlace nuevo el evento de eliminar
      eliminar();
  })

  function eliminar(){
    // se recorren todos los elemntos a con clase .enlace
    for(var i = 0; i < enlaces.length; i++){
      // se asigna el evento
      enlaces[i].onclick = function(e) {
        var content = e.target.parentNode.parentNode;
        var li = e.target.parentNode;
        content.removeChild(li);
      };
    }
  }
// si no se llama al incializar el documento no se pueden eliminar los ya existentes
eliminar();
}
body {
    font-size: sans-serif;
    max-width: 400px;
}
#contenedor li {
    padding: 18px;
    margin: 8px 0;
    background: #ddd;
    list-style: none;
}
#contenedor li a {
    cursor: pointer;
    float: right;
    padding: 3px 7px;
    background: #fbfbfb;
}
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <h1>Como agregar o eliminar elementos a una div</h1>

    <div id="contenedor">
        <li>Contenido 1<a class="enlace">x</a></li>
        <li>Contenido 2<a class="enlace">x</a></li>
    </div>

     <input class="boton" type="button" value="Agregar elemento" style="float: right;">

  </body>
</html>

2
  • Hola @Daniel Mauricio Sánchez Ávila, me olvide preguntarte ¿Por qué solo funciona con "getElementsByClassName" y NO con "querySelectorAll"? Commented el 14 mar. 2019 a las 21:31
  • Realmente debería funcionar con querySelectorAll también, acabe de probar y funciona si declaramos la variable en la función eliminar() Commented el 14 mar. 2019 a las 21:38

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.