Im trying to get function that will delete div/s with attributte that already exists and leave 1 left so there will be no copies of that.
function favoriteLoadItems() {
const resultsFAV = document.querySelector(".library-favorite-container");
var favoritIt = allMusic.filter(x => x.status === "favorite");
for (let i = 0; i < favoritIt.length; i++) {
let resultFAV =
`<div class="library-favorite-item" li-index="${favoritIt[i].id}" onclick="clickedSingle(this)">
<div class="library-favorite-data">
<h1>${favoritIt[i].name}</h1>
<span>${favoritIt[i].artist}</span>
</div>
<audio class="${favoritIt[i].src}" src="songs/${favoritIt[i].src}.mp3"></audio>
<i class="fa-heart fa-regular"></i>
</div>`;
resultsFAV.insertAdjacentHTML("afterbegin", resultFAV);
}
favoriteItemsNumber.innerText = $('.library-favorite-item').length;
}
function clickedSingle(element){
let getLiIndex = element.getAttribute("li-index");
let i = getLiIndex; i++;
musicIndex = i;
loadMusic(musicIndex);
playMusic();
playingSong();
playingSongPersonal()
}
Im getting same divs with same value from li-index="${favoritIt[i].id}". I want to delete if there is a existing same one, or if u can see a mistake that i could made in function above that will help my problem i will be greatfull.
<div class="library-favorite-info">
<h1>Polubione Utwory</h1>
<p>Twoje polubione utwory : <span class="library-favorite-items-number">2</span><br> Zebrane w jedynm miejscu, ku twojej wygodzie.</p>
</div>
<div class="library-favorite-container">
</div>
var allMusic = [
{
name: "Havana",
artist: "Camila Cabello",
src: "CamilaCabelloHavana",
img: "CamilaCabelloHavana",
style: "Energic",
status: "nostatus",
id: "0",
},
{
name: "Dj Is Your Second Name",
artist: "C-Bool , Giang Pham",
src: "C-BooLDJ",
img: "C-BooLDJ",
style: "Energic",
status: "nostatus",
id: "1",
},
{
name: "Never Go Away",
artist: "C-Bool",
src: "C-BooL-NeverGoAway",
img: "C-BooL-NeverGoAway",
style: "Energic",
status: "nostatus",
id: "2",
},
{
name: "Champions",
artist: "Kevin Rudolf",
src: "KevinRudolf-Champions",
img: "KevinRudolf-Champions",
style: "Workout",
status: "nostatus",
id: "3",
},
{
name: "Ride It",
artist: "DJ Regard",
src: "DJRegard-Rideit",
img: "DJRegard-Rideit",
style: "Energic",
status: "nostatus",
id: "4",
},
{
name: "Choker",
artist: "Twenty one pilots",
src: "twentyonepilots-Choker",
img: "scaled-and-icy-b-iext104194001",
style: "Chill",
status: "nostatus",
id: "5",
},
{
name: "The Outside",
artist: "Twenty one pilots",
src: "TwentyOnePilots-TheOutside",
img: "scaled-and-icy-b-iext104194001",
style: "Chill",
status: "nostatus",
id: "6",
},
{
name: "Shy Away",
artist: "Twenty one pilots",
src: "TwentyOnePilots-ShyAway",
img: "scaled-and-icy-b-iext104194001",
style: "Chill",
status: "nostatus",
id: "7",
},
{
name: "Saturday",
artist: "Twenty one pilots",
src: "TwentyOnePilots-Saturday",
img: "scaled-and-icy-b-iext104194001",
style: "Chill",
status: "nostatus",
id: "8",
},
{
name: "Redecorate",
artist: "Twenty one pilots",
src: "TwentyOnePilots-Redecorate",
img: "scaled-and-icy-b-iext104194001",
style: "Chill",
status: "nostatus",
id: "9",
},
{
name: "Never Take It",
artist: "Twenty one pilots",
src: "TwentyOnePilots-NeverTakeIt",
img: "scaled-and-icy-b-iext104194001",
style: "Chill",
status: "nostatus",
id: "10",
},
{
name: "Mulberry Street",
artist: "Twenty one pilots",
src: "TwentyOnePilots-MulberryStreet",
img: "scaled-and-icy-b-iext104194001",
style: "Chill",
status: "nostatus",
id: "11",
},
{
name: "Good Day",
artist: "Twenty one pilots",
src: "TwentyOnePilots-GoodDay",
img: "scaled-and-icy-b-iext104194001",
style: "Chill",
status: "nostatus",
id: "12",
},
{
name: "Kłótnia",
artist: "Evtis",
src: "Evtis-Kłótnia",
img: "C-BooL-NeverGoAway",
style: "Hip-Hop",
status: "nostatus",
id: "13",
},
{
name: "Idziemy Po Swoje",
artist: "Szusty , Guralsko",
src: "donGURALesko-IdziemyPoSwojeSzUstyBlend",
img: "guralsko",
style: "Workout",
status: "nostatus",
id: "14",
},
{
name: "Legenda",
artist: "Szusty , Guralsko",
src: "donGURALesko-LegendaSzUstyBlend",
img: "guralsko",
style: "Workout",
status: "nostatus",
id: "15",
},
]