Zamykanie tylko jednej karty

Question

Witam. Mam problem gdyż po naciśnięciu buttona wyjścia znikają mi wszystkie inne karty. Chciałbym aby usuwała się ta karta na której klikne przycisk wyjścia. Uczę się jeszcze JS więc podpowiedź byłaby mile widziana :D
pozdro

        const actionBtn = document.querySelector("#card1-btn")
        const eeeeeeeee = document.querySelector("#card2-btn")

        const modal = (body = {}) => {
            return `
        <div>
            <button id="close-btn"><ion-icon name="close-outline"></ion-icon></button>
        </div>
        <div class="card-img">
            <img src="https://source.unsplash.com/random/340x220?sig=1" />
        </div>
        <div class="card-info">
            <p class="date" style="color:${body.main_color}">${body.date}</p>
            <p class="card-title">${body.title}</p>
            <p class="card-content">${body.content}</p>
        </div>

        <div class="card-statistics" style="background-color:${body.main_color}">
            <div class="card-read">
                <p id="read">${body.read}</p>
                <span class="info">read</span>
            </div>
            <div class="card-views">
                <p id="views">${body.views}</p>
                <span class="info">views</span>
            </div>
            <div class="card-comments">
                <p id="comments">${body.comments}</p>
                <span class="info">comments</span>
            </div>
        </div>
`
        }

        const createModal = (value) => {
            const card_body = document.createElement('div')
            card_body.className = 'card-body'
            // card_body.style = `box-shadow: ${main_color} 0px 0px 50px, rgba(0, 0, 0, 0.23) 0px 6px 6px;`
            card_body.innerHTML = modal(value)
            document.body.appendChild(card_body)

            const closeButtons = document.querySelectorAll('#close-btn');
            closeButtons.forEach(btn => btn.addEventListener('click', () => {
            const modal = document.querySelector(".card-body");
            modal.remove();
            document.body.style.overflow = "auto";
        }));
        }



        const modal1 = () => {


            createModal({
                    date: "1 week ago",
                    title: "Post Two",
                    content: 'Lorem ipsum description asiojiod jsaiodj ioasj oidsas',
                    read: "6m",
                    views: "5125",
                    comments: "192",
                    main_color: "var(--card-main)"
            });


        };

        const modal2 = () => {


            createModal({
                    date: "5 seconds ago",
                    title: "eeeeeeeeeee",
                    content: 'hdcsadncasjdckjahsdckjhascd',
                    read: "6m",
                    views: "696969",
                    comments: "420",
                    main_color: "var(--qwerty)"
            });


        };


        actionBtn.addEventListener("click", modal1);
        eeeeeeeee.addEventListener("click", modal2);

 

Answer 1

W przypadku kodu, który zaprezentowałeś możesz użyć np. takiego zapisu

const closeButtons = document.querySelectorAll('#close-btn');
closeButtons.forEach(btn => btn.addEventListener('click', (e) => {
    const modal = e.target.closest('.card-body');
    modal.remove();
}));

• what does (e) mean: [ 1 ] [ 2 ]

• closest()

document.body.style.overflow = 'auto'  dodaj do css-a, np.

body {
  /* Twój wcześniejszy kod */

  overflow-y: auto;
}

 

mając już "utworzony" card_body

const createModal = (value) => {
  const card_body = document.createElement('div');
  ...

  document.body.appendChild(card_body);

  ...
}

możesz go użyć w zdarzeniu click dla close_button

const createModal = (value) => {
  const card_body = document.createElement('div');
  card_body.classList.add('card-body');
  card_body.innerHTML = modal(value);
  document.body.appendChild(card_body);

  const close_button = card_body.querySelector('#close-btn');
  close_button.addEventListener('click', () => {
    card_body.remove();
  });
}

​​​​​​​

 

 

P.S. Przykładowy nieco inny zapis Twojego kodu .

Comments

dziękuję Ci bardzo za pomoc :D pozdrawiam