He hecho que aparezca un botón de 'eliminar' en div de estantería para mi proyecto de biblioteca. Básicamente, cuando agrego un libro basado en la entrada del usuario (título, autor, páginas), agrega una pequeña tarjeta con esa información allí. Usando DOM, lo agregué creando div con la clase de CELL y solo lo diseñé a través de css. Sé que usar atributos de datos puede ayudar a eliminar ciertas tarjetas en lugar de todas, pero no puedo encontrar cómo agregarlo a través de DOM. Quiero poder agregar varios libros con varios botones de eliminación y hacer que funcione para ese libro en particular que quiero eliminar. ¿Puede alguien dirigirme en la dirección correcta para esto? Aquí está mi código JavaScript
const addBook = (ev) => { ev.preventDefault(); var form = document.getElementById('myForm'); form.style.display= 'none'; var myLibrary = []; let bookInfo = { title: document.getElementById('title').value, author: document.getElementById('author').value, pages: document.getElementById('pages').value, boxRead: document.getElementById('checkBox').value } myLibrary.push(bookInfo); bookInfo += myLibrary; for (i = 0; i < myLibrary.length; i++) { console.log(myLibrary[i]) var container = document.getElementById('book-shelf') var div = document.createElement('div') var divT = document.createElement('p') var divA = document.createElement('p') var divP = document.createElement('p') var divRead = document.createElement('button') var divX = document.createElement('button') var checkBox = document.getElementById('checkBox') div.classList.add('cell') divRead.classList.add('readBox') divX.classList.add('remove-book') divT.classList.add('title') divT.innerHTML = `${title.value}` divA.innerHTML = `${author.value}` divP.innerHTML = `${pages.value}` divX.innerHTML = '×' divX.dataset.name = `${title.value}` div.dataset.name = `${title.value}` if (checkBox.checked == true) { divRead.innerHTML = 'Already Read' } else { divRead.innerHTML = 'Not read yet' } container.appendChild(div); div.appendChild(divT) div.appendChild(divA) div.appendChild(divP) div.appendChild(divRead) div.appendChild(divX) } // reset forms after submitting // document.forms[0].reset(); localStorage.setItem('myBookList',JSON.stringify(myLibrary) ); } function addBtn() { var form = document.getElementById('myForm'); form.style.display = 'flex' ; } var submitBtn = document.querySelector('.submit-btn'); submitBtn.addEventListener('click',addBook) var readBtn = document.getElementById('readBtn') var closeBtn = document.querySelector('.x'); closeBtn.addEventListener('click', (event)=> { event.preventDefault(); var form = document.getElementById('myForm') form.style.display = 'none'; }) ``