Soy un principiante en javascript y tengo li que el usuario inserta dinámicamente y se guarda en una matriz de objetos, tiene su identificación aleatoria dinámica y quiero que cuando el usuario presione el elemento, devuelva la identificación de li y compárelo con la identificación de la película para que pueda encontrar el índice y luego eliminarlo de la matriz y eliminar el li. De forma anticipada, muchas gracias por su ayuda.
let n; function deleteFilm() { const len = listRoot.children.length; for (let i = 0; i < len; i++) { const element = listRoot.children[i]; // listRoot is ul element.addEventListener('click', () => { const idToRemove = +element.id; index = movies.map((object) => object.movieId).indexOf(idToRemove); console.log(index); n = index; }); } console.log(n); movies.splice(n, 1); listRoot.children[n].remove(); if (movies[0] === undefined) { entryText.style.display = 'block'; } deleteModal.classList.remove('visible'); blackDrop.classList.remove('visible'); } acceptButton.addEventListener('click', deleteFilm);No asigne clics de nuevo (especialmente no dentro de un ciclo for).
Su lógica básica podría simplificarse a este par de líneas:
const movies = [ {id:123, title:"Lorem"}, {id:456, title:"Ipsum"}, {id:789, title:"Dolor"}, ]; // Retrieve a movie from array by its ID const getMovie = (id) => movies.find(mov => mov.id === id); // Remove a movie Object from array const deleteMovie = (id) => movies.splice(movies.indexOf(getMovie(id)), 1); // Task: const movieId = 456; // The movie ID to delete deleteMovie(movieId); console.log(movies); // Test Luego, para eliminar elementos del DOM, sabiendo que la ID era, por ejemplo: 456 , todo lo que necesita es apuntar a los elementos que tienen data-movieid="456" como:
document.querySelectorAll(`[data-movieid="${movieId}"]`).forEach(el => el.remove());Ejemplo:
// Utility functions: const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop); const ELS = (sel, parent) => (parent || document).querySelectorAll(sel); const EL = (sel, parent) => (parent || document).querySelector(sel); // Task: const getMovie = (id) => movies.find(mov => mov.id === id); const deleteMovie = (id) => movies.splice(movies.indexOf(getMovie(id)), 1); const createMovie = (movie) => { const EL_li = ELNew("li", { className: "list-item movie", textContent: movie.title, onclick() { deleteMovie(movie.id); EL_li.remove(); ELS(`[data-movieid="${movie.id}"]`).forEach(el => el.remove()); } }); EL("#movies").append(EL_li); }; const movies = [ {id:123, title:"Lorem"}, {id:456, title:"Ipsum"}, {id:789, title:"Dolor"}, ]; movies.forEach(createMovie); Click to delete a movie: <ul id="movies" class="list"></ul> <div data-movieid="456">If you click on Ipsum I will be removed too!</div>