Gian Franco Alexis Poma Vidal@pomitax
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.
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>