Removing div/divs if attribute already exists in another div

Viewed 38

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",
  },
]
1 Answers

You could start by making an array of existing li-index attributes:

const existing = [];
document.querySelectorAll('div[li-index]').forEach(d => existing.push(d.getAttribute('li-index')));

Then check it when you iterate later...

  if (existing.includes(i)) continue;

function favoriteLoadItems() {
const existing = [];
document.querySelectorAll('div[li-index]').forEach(d => existing.push(d.getAttribute('li-index')));

  const resultsFAV = document.querySelector(".library-favorite-container");
  var favoritIt = allMusic.filter(x => x.status === "favorite");
  for (let i = 0; i < favoritIt.length; i++) {
  if (existing.includes(i)) continue;
    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;
}

Related