Почему не выполняется условие при клике на img?

Рейтинг: 0Ответов: 1Опубликовано: 01.03.2023

Проблема заключается в том что не выполняется условие при клике на img корзина svg-delete (при нажатие на корзину должен полностью удалятся зеленый блок). Также нужно учитывать что данных зеленых блоков может быть множество, следовательно img корзин такое же количество.

const mainBlock = document.getElementById('chatWrapper');
mainBlock.addEventListener('click', (event) => {
    const input = document.getElementById('input');
    const sendButton = document.getElementById('send');
    const editButton = document.getElementById('edit');

    if (event.target.classList.contains('svg-delete') === true) {
        event.target.querySelector('.left').style.display = 'none'
    }

    if (event.target.classList.contains('svg-settings') === true) {
        sendButton.style.display = 'none';
        editButton.style.display = 'inline';
        const message = event.target.parentElement.parentElement.children[0];
        input.value = message.textContent;
        message.setAttribute('id', 'text');
    }

    if (event.target.id === 'edit') {
        sendButton.style.display = 'inline';
        editButton.style.display = 'none';
        const text = document.getElementById('text');
        text.removeAttribute('id');


        if (input.value === '' ) {
            return false
        } else {
            text.textContent = input.value;
            text.removeAttribute('id');
            input.value = '';
        }
    }
});
*{
    font-family: sans-serif;
    margin: 0;
}
button {
    cursor: pointer;
}

.chat_wrapper {
    width: 600px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-flow: column nowrap;
    border: 1px solid lightgreen;
    border-radius: 15px;
    padding: 15px;
}


.footerChat {
    margin: 10px;
    display: flex;
    justify-content: center;
}

.footerChat > input {
    width: 75%;
    border: 1px solid lightblue;
    font-size: 16px;
    font-weight: 400;
    transition: all .5s ease-in;
}

.footerChat > input:hover {
    border: 1px solid lightseagreen;
    transition: all .5s ease-out;
    padding: 10px;
}

.footerChat > button {
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}
.send-button {
    background: lightseagreen;
}
.edit-button {
    background-color: darkviolet;
    display: none;
}
.footerChat > button:hover {
    transition: all .5s ease-out;
}
.send-button:hover {
    background-color: lightblue;
}
.edit-button:hover {
    background-color: mediumpurple;
}

.chat {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.left {
    align-self: flex-start;
}

.right {
    align-self: flex-end;
}

.message {
    background: lightgreen;
    padding: 15px 15px;
    border-radius: 25px;
    border-radius-topleft: unset;
}

.message_box {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-flow: row nowrap;
    margin-bottom: 20px;
}

.date {
    font-size: 10px;
}

.username {
    font-weight: bold;
}
.settings-button {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    align-self: flex-end;
}
.delete-button {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
}
.svg-settings,
.svg-delete {
    width: 20px;
    height: 20px;
}
.message_container p {
    margin-bottom: 10px;
}
<div class="chat_wrapper" id="chatWrapper">
    <div class="chat">
        <div class="chatContainer left">
            <div class="message friend">
                <div class="message_box">
                    <p class="username">
                        Кирилл
                    </p>
                    <p class="date">02.15.2023 20:00</p>
                </div>
                <div class="message_container">
                    <p>Привет, я первый раз в этом чате.</p>


                    <button class="settings-button">
                        <img class="svg-settings" src="./settings.svg" alt="settings">
                    </button>


                    <button class="delete-button">
                        <img class="svg-delete" src="./delete.svg" alt="delete">
                    </button>
                </div>
            </div>
        </div>
        <div class="chatContainer right">
            <div class="message user">
                <div class="message_box">
                    <p class="username">
                        Дмитрий
                    </p>
                    <p class="date">02.15.2023 20:00</p>
                </div>
                <div class="message_container">
                    <p>Привет давай я раскажу про чат.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="footerChat">
        <label for="input"></label>
        <input type="text" id="input">
        <button class="send send-button" id="send">Отправить</button>
        <button class="send edit-button" id="edit" >Отредактировать</button>
    </div>
</div>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

не выполняется условие при клике на img корзина svg-delete (при нажатие на корзину должен полностью удалятся зеленый блок).

Просто ты не верно определяешь нужные элементы. Смотри, я дописал комментарии в коде.

const mainBlock = document.getElementById('chatWrapper');
mainBlock.addEventListener('click', (event) => {
  const input = document.getElementById('input');
  const sendButton = document.getElementById('send');
  const editButton = document.getElementById('edit');
  // вот так нужно определять нужные элементы
  if (event.target.closest('.delete-button')) {
    event.target.closest('.left').style.display = 'none'
  }

  if (event.target.classList.contains('svg-settings') === true) {
    sendButton.style.display = 'none';
    editButton.style.display = 'inline';
    const message = event.target.parentElement.parentElement.children[0];
    input.value = message.textContent;
    message.setAttribute('id', 'text');
  }

  if (event.target.id === 'edit') {
    sendButton.style.display = 'inline';
    editButton.style.display = 'none';
    const text = document.getElementById('text');
    text.removeAttribute('id');


    if (input.value === '') {
      return false
    } else {
      text.textContent = input.value;
      text.removeAttribute('id');
      input.value = '';
    }
  }
});
* {
  font-family: sans-serif;
  margin: 0;
}

button {
  cursor: pointer;
}

.chat_wrapper {
  width: 600px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-flow: column nowrap;
  border: 1px solid lightgreen;
  border-radius: 15px;
  padding: 15px;
}

.footerChat {
  margin: 10px;
  display: flex;
  justify-content: center;
}

.footerChat>input {
  width: 75%;
  border: 1px solid lightblue;
  font-size: 16px;
  font-weight: 400;
  transition: all .5s ease-in;
}

.footerChat>input:hover {
  border: 1px solid lightseagreen;
  transition: all .5s ease-out;
  padding: 10px;
}

.footerChat>button {
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.send-button {
  background: lightseagreen;
}

.edit-button {
  background-color: darkviolet;
  display: none;
}

.footerChat>button:hover {
  transition: all .5s ease-out;
}

.send-button:hover {
  background-color: lightblue;
}

.edit-button:hover {
  background-color: mediumpurple;
}

.chat {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.left {
  align-self: flex-start;
}

.right {
  align-self: flex-end;
}

.message {
  background: lightgreen;
  padding: 15px 15px;
  border-radius: 25px;
  border-radius-topleft: unset;
}

.message_box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-flow: row nowrap;
  margin-bottom: 20px;
}

.date {
  font-size: 10px;
}

.username {
  font-weight: bold;
}

.settings-button {
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: none;
  align-self: flex-end;
}

.delete-button {
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: none;
}

.svg-settings,
.svg-delete {
  width: 20px;
  height: 20px;
}

.message_container p {
  margin-bottom: 10px;
}
<div class="chat_wrapper" id="chatWrapper">
  <div class="chat">
    <div class="chatContainer left">
      <div class="message friend">
        <div class="message_box">
          <p class="username">
            Кирилл
          </p>
          <p class="date">02.15.2023 20:00</p>
        </div>
        <div class="message_container">
          <p>Привет, я первый раз в этом чате.</p>


          <button class="settings-button">
                        <img class="svg-settings" src="./settings.svg" alt="settings">
                    </button>


          <button class="delete-button">
                        <img class="svg-delete" src="./delete.svg" alt="delete">
                    </button>
        </div>
      </div>
    </div>
    <div class="chatContainer right">
      <div class="message user">
        <div class="message_box">
          <p class="username">
            Дмитрий
          </p>
          <p class="date">02.15.2023 20:00</p>
        </div>
        <div class="message_container">
          <p>Привет давай я раскажу про чат.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="footerChat">
    <label for="input"></label>
    <input type="text" id="input">
    <button class="send send-button" id="send">Отправить</button>
    <button class="send edit-button" id="edit">Отредактировать</button>
  </div>
</div>