Нужно чтоб элемент класса (.cardsDescription) скрывался если нажать на div класса (.closeDescription)

Question

Имя: Сайтама

Редкость: Мифическая

Стихия: Огонь

Рейтинг: 100

Сила: 25

Скорость: 25

Упорность: 25

Стиль: 25

Описание: Сайтама — независимый супергерой из Z-Сити, который выполняет героические подвиги в качестве хобби. В течение трёх лет он упорно тренировался, чтобы стать сильнейшим существом и победить любого врага одним ударом.

Дата добавления: 28/12/2023

const allcards = document.querySelectorAll('.cardbox');
const closeCardDescription = document.querySelectorAll('.closeDescription');
allcards.forEach((cardId, index) => 
cardId.addEventListener('click', () => {
    const cardDescription = cardId.lastElementChild;
    cardDescription.style.display = "flex";
    document.body.style.overflow = "hidden";
}));
closeCardDescription.forEach((close, index) => 
close.addEventListener('click', () => {
    var parentDiv = close.closest('.cardsDescription');
    allcards.forEach((cardId, index) => {
        const cardDescription = cardId.lastElementChild;
        cardDescription.style.display = "none";
    });
    document.body.style.overflow = "auto";
}));

.value {
    font-style: italic;
    font-weight: normal;
}
.cardsDescription img {
    height: 100%;
    position: relative;
}
.column1 {
    padding: 10px;
}
.column1 p {
    font-weight: bold;
    font-size: 20px;
}
.cardsDescription {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: #FFFFF0;
    z-index: 2;
    overflow: hidden;
    display: none;

}
.closeDescription {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 24px;
    height: 24px;
    opacity: 0.2;
    cursor: pointer;
  transition: opacity ease 0.5s;

    &:hover {
        opacity: 1;
    }
}

.closeDescription::before,
.closeDescription::after {
    content: '';
    position: absolute;
    top: 10px;
    display: block;
    width: 24px;
    height: 3px;
    background: #000;
}

.closeDescription::before {
    transform: rotate(45deg);
}

.closeDescription::after {
    transform: rotate(-45deg);
}

<li class="cardbox">
                <img class="myfics onepunchman strenght100 allcards fire" src="images/cards/saitama.jpg">
                <div class="cardsDescription">
                    <img src="images/cards/saitama.jpg">
                    <div class="column1">
                        <div class="closeDescription"></div>
                        <p>Имя: <span class="value">Сайтама</span></p>
                        <p>Редкость: <span class="value">Мифическая</span></p>
                        <p>Стихия: <span class="value">Огонь</span></p>
                        <p>Рейтинг: <span class="value">100</span></p>
                        <p>Сила: <span class="value">25</span></p>
                        <p>Скорость: <span class="value">25</span></p>
                        <p>Упорность: <span class="value">25</span></p>
                        <p>Стиль: <span class="value">25</span></p>
                        <p>Описание: <span class="value">Сайтама — независимый супергерой из Z-Сити, который выполняет героические подвиги в качестве хобби. В течение трёх лет он упорно тренировался, чтобы стать сильнейшим существом и победить любого врага одним ударом.</span></p>
                        <p>Дата добавления: <span class="value">28/12/2023</span></p>
                    </div>
                    <div class="closeDescription" onclick="hide()"></div>
                </div>
            </li>

Answer 1

Надо дописать e.stopPropagation():

closeCardDescription.forEach((close, index) => 
    close.addEventListener('click', (e) => {
        e.stopPropagation();
        ...
        ...

А ещё не ясно зачем столько много циклов. Вместо

allcards.forEach((cardId, index) => {
    const cardDescription = cardId.lastElementChild;
    cardDescription.style.display = "none";
});

я так понимаю достаточно сделать

parentDiv.style.display = "none";

const allcards = document.querySelectorAll('.cardbox');
const closeCardDescription = document.querySelectorAll('.closeDescription');
allcards.forEach((cardId, index) =>
  cardId.addEventListener('click', () => {
    const cardDescription = cardId.lastElementChild;
    cardDescription.style.display = "flex";
    document.body.style.overflow = "hidden";
  }));
closeCardDescription.forEach((close, index) =>
  close.addEventListener('click', (e) => {
    e.stopPropagation();

    close.closest('.cardsDescription').style.display = "none";
    document.body.style.overflow = "auto";
  }));

.value {
  font-style: italic;
  font-weight: normal;
}

.cardsDescription img {
  height: 100%;
  position: relative;
}

.column1 {
  padding: 10px;
}

.column1 p {
  font-weight: bold;
  font-size: 20px;
}

.cardsDescription {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: #FFFFF0;
  z-index: 2;
  overflow: hidden;
  display: none;
}

.closeDescription {
  position: absolute;
  top: 30px;
  right: 20px;
  width: 24px;
  height: 24px;
  opacity: 0.2;
  cursor: pointer;
  transition: opacity ease 0.5s;
  &:hover {
    opacity: 1;
  }
}

.closeDescription::before,
.closeDescription::after {
  content: '';
  position: absolute;
  top: 10px;
  display: block;
  width: 24px;
  height: 3px;
  background: #000;
}

.closeDescription::before {
  transform: rotate(45deg);
}

.closeDescription::after {
  transform: rotate(-45deg);
}

<li class="cardbox">
  <img class="myfics onepunchman strenght100 allcards fire" src="images/cards/saitama.jpg">
  <div class="cardsDescription">
    <img src="images/cards/saitama.jpg">
    <div class="column1">
      <div class="closeDescription"></div>
      <p>Имя: <span class="value">Сайтама</span></p>
      <p>Редкость: <span class="value">Мифическая</span></p>
      <p>Стихия: <span class="value">Огонь</span></p>
      <p>Рейтинг: <span class="value">100</span></p>
      <p>Сила: <span class="value">25</span></p>
      <p>Скорость: <span class="value">25</span></p>
      <p>Упорность: <span class="value">25</span></p>
      <p>Стиль: <span class="value">25</span></p>
      <p>Описание: <span class="value">Сайтама — независимый супергерой из Z-Сити, который выполняет героические подвиги в качестве хобби. В течение трёх лет он упорно тренировался, чтобы стать сильнейшим существом и победить любого врага одним ударом.</span></p>
      <p>Дата добавления: <span class="value">28/12/2023</span></p>
    </div>
    <div class="closeDescription" onclick="hide()"></div>
  </div>
</li>

Answer 2

const allcards = document.querySelectorAll('.cardbox');
const closeDescriptions = document.querySelectorAll('.closeDescription');

allcards.forEach((cardId) => 
    cardId.addEventListener('click', (e) => {
        e.stopPropagation();
        const cardDescription = cardId.lastElementChild;
        cardDescription.style.display = "flex";
        document.body.style.overflow = "hidden";
    })
);

closeDescriptions.forEach((closeButton) => 
    closeButton.addEventListener('click', (e) => {
        e.stopPropagation();
        const cardDescription = closeButton.closest('.cardsDescription');
        if (cardDescription) {
            cardDescription.style.display = "none";
            document.body.style.overflow = "auto";
        }
    })
);

.value {
    font-style: italic;
    font-weight: normal;
}
.cardsDescription img {
    height: 100%;
    position: relative;
}
.column1 {
    padding: 10px;
}
.column1 p {
    font-weight: bold;
    font-size: 20px;
}
.cardsDescription {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: #FFFFF0;
    z-index: 2;
    overflow: hidden;
    display: none;

}
.closeDescription {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 24px;
    height: 24px;
    opacity: 0.2;
    cursor: pointer;
  transition: opacity ease 0.5s;

    &:hover {
        opacity: 1;
    }
}

.closeDescription::before,
.closeDescription::after {
    content: '';
    position: absolute;
    top: 10px;
    display: block;
    width: 24px;
    height: 3px;
    background: #000;
}

.closeDescription::before {
    transform: rotate(45deg);
}

.closeDescription::after {
    transform: rotate(-45deg);
}

<li class="cardbox">
                <img class="myfics onepunchman strenght100 allcards fire" src="images/cards/saitama.jpg">
                <div class="cardsDescription">
                    <img src="images/cards/saitama.jpg">
                    <div class="column1">
                        <div class="closeDescription"></div>
                        <p>Имя: <span class="value">Сайтама</span></p>
                        <p>Редкость: <span class="value">Мифическая</span></p>
                        <p>Стихия: <span class="value">Огонь</span></p>
                        <p>Рейтинг: <span class="value">100</span></p>
                        <p>Сила: <span class="value">25</span></p>
                        <p>Скорость: <span class="value">25</span></p>
                        <p>Упорность: <span class="value">25</span></p>
                        <p>Стиль: <span class="value">25</span></p>
                        <p>Описание: <span class="value">Сайтама — независимый супергерой из Z-Сити, который выполняет героические подвиги в качестве хобби. В течение трёх лет он упорно тренировался, чтобы стать сильнейшим существом и победить любого врага одним ударом.</span></p>
                        <p>Дата добавления: <span class="value">28/12/2023</span></p>
                    </div>
                    <div class="closeDescription" onclick="hide()"></div>
                </div>
            </li>

Может быть все же вариант с проверками...

const allcards = document.querySelectorAll('.cardbox');
const closeDescriptions = document.querySelectorAll('.closeDescription');

if(allcards && allcards.length){
    allcards.forEach((cardId) => 
        cardId.addEventListener('click', (e) => {
            e.stopPropagation();
            const cardDescription = cardId.lastElementChild;
            if(cardDescription){
                cardDescription.style.display = "flex";
            }
            document.body.style.overflow = "hidden";
        })
    );
}

if(closeDescriptions && closeDescriptions.length){
    closeDescriptions.forEach((closeButton) => 
        closeButton.addEventListener('click', (e) => {
            e.stopPropagation();
            const cardDescription = closeButton.closest('.cardsDescription');
            if (cardDescription) {
                cardDescription.style.display = "none";
                document.body.style.overflow = "auto";
            }
        })
    );
}

БЛОГ НА HUSL

Нужно чтоб элемент класса (.cardsDescription) скрывался если нажать на div класса (.closeDescription)

Ответы (2 шт):