Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

131
Views
Eliminar divs específicos con DOM

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'; }) ``
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!