I have a school project and I need to make a music website, it's almost finished, but I'm having problems doing the playlist with web local storage.
'use strict'
const configs = {
PLAYLIST_KEY: "playlist",
};
function addMusicToPlaylist(data) {
let musics = new Array();
if (localStorage.hasOwnProperty(configs.PLAYLIST_KEY)) {
musics = JSON.parse(localStorage.getItem(configs.PLAYLIST_KEY));
}
musics.push(data);
localStorage.setItem(configs.PLAYLIST_KEY, JSON.stringify(musics));
}
$(".add-music-button").on("click", function () {
let musicRef = $(this).data("ref");
let musicObject = {
author: $(`#${musicRef} .music-author`).html(),
title: $(`#${musicRef} .music-title`).html(),
};
addMusicToPlaylist(musicObject);
});
$(document).ready(function () {
if ($("#playlist-table").length > 0) {
if (localStorage.hasOwnProperty(configs.PLAYLIST_KEY)) { // testa se o objecto tem a propriedade especificada
JSON.parse(localStorage.getItem(configs.PLAYLIST_KEY)).map(
(music, index) => {
$("#playlist-table").append(`
<tr id="music-${index}">
<td class="music-author">${music.author}</td>
<td class="music-title">${music.title}</td>
</tr>
<tr><td><p class="textoFav"></p></td> musica<td><button class="favBotao" onclick="apagar()" ><i class="fa fa-remove"></i></button></td></tr>
`);
}
);
}
}
});
function apagar (){
localStorage.removeItem('playlist')
}
I only can remove all of the musics inside the playlist, but i want to remove only one music, like this:
"button 1 : music 1
button 2 : music 2
button 3 : music 3
button 4 : music 4"
If the user presses button 3, I want it to delete from the playlist, the music 3. How can I do that?