Estoy refrescando mis conocimientos de Javascript, para lo cual he creado una sencilla aplicación en la que tengo una caja de texto y dos botones: uno para agregar otra caja de texto y otro para borrarla.
La idea es simular que pedimos al usuario que teclee aficiones y, si así lo desea, pueda borrar alguna de ellas. Bueno, la parte de añadir me la hace sin problemas, la pega viene cuando quiero borrar.
Si bien me deja eliminar el primer elemento, los siguientes no me deja hacerlo, se produce un error en el que me indica que el evento que le paso con el botón borrar es undefined.
Este es el código que tengo. Como veréis es muy sencillo, no tiene mucha complicación, pero falla:
let formulario = document.getElementById("formulario");
function nueva(){
//Añade una nueva afición en blanco
let nodoDiv = document.createElement("div");
nodoDiv.classList.add("row", "mt-2");
nodoDiv.innerHTML = `
<div class="col">
<input type="text" class="form-control" placeholder="teclee un hobbie">
</div>
<div class="col-1">
<button type="button" class="btn btn-success"
onclick="nueva()">+</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-danger"
onclick="borrar()">-</button>
</div>
`;
formulario.appendChild(nodoDiv);
}
function borrar(evento){
//Añade una nueva afición en blanc
console.log("evento",evento);
let boton = evento.target;
let elementoBorrar = elemento.parentElement.parentElement; //Row
formulario.removeChild(elementoBorrar)
}
<!doctype html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Demo Javascript</title>
</head>
<body>
<div class="container">
<h1 class="display-3">Jugando con Javascript clásico</h1>
<hr>
<p class="lead">Introduzca sus aficiones:</p>
<form class="mt-3" id="formulario">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="teclee un hobbie">
</div>
<div class="col-1">
<button type="button" class="btn btn-success"
onclick="nueva()">+</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-danger"
onclick="borrar(event)">-</button>
</div>
</div>
</form>
</div>
<!-- Resto de dependencias js para Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Scripts js personalizados -->
<script src="script.js"></script>
</body>
</html>
¿Se os ocurre qué puede estar pasando?
Muchas gracias,