Удаление блока js

Хотел попросить у вас посмотреть мой код, и сказать правильно ли я сделал, если что то не так попрошу вас сказать мне мою ошибку, и обяснить как лучше здесь сделать, спасибо.

<button class="btn btn--sell" id="call">Call</button>
<button class="btn btn--sell" id="email">Email</button>

<div class="phone" id="phone">
              <div class="phone__inner">
                <div class="phone__close">
                  <button class="phone__close-btn" id="close">&#10006;</button>
                </div>
                <div class="phone__content">
                  1
                </div>
              </div>
            </div>

            <div class="email" id="email">
              <div class="email__inner">
                <div class="email__close">
                  <button class="email__close-btn" id="close">&#10006;</button>
                </div>
                <div class="email__content">
                  2
                </div>
              </div>
            </div>
    

css

    .phone {
      margin-top: 10px;
    
      display: none;  
      transition: opacity 0.2s linear;
    
      &__inner {
        position: relative;
    
        // background-color: $white;
        box-shadow: $shadow;
      }
    
      &__close {
       position: absolute;
       top: 10px;
       right: 10px;
       z-index: 1;
    
       &-btn {
        cursor: pointer;
        padding: 0;
        margin: 0;
        border: 0;
        background: 0;
    
        font-size: 17px;
       }
      }
    
      &__content {
        padding: 25px;
      }
    }
    
    .phone.active {
      display: block;
    }

js

const btnCall = document.querySelector("#call")
const btnEmail = document.querySelector("#email")

const blockCall = document.querySelector(".phone")
const blockEmail = document.querySelector(".email")

const close = document.querySelectorAll("#close")

btnCall.addEventListener("click", function () {
  blockCall.classList.add("active")
})

btnEmail.addEventListener("click", function () {
  blockEmail.classList.add("active")
})

close.forEach(item => {
  item.addEventListener("click", function(e) {
    let target = e.target;
    
    if( target.closest(".email")) {
      blockEmail.classList.remove("active")
    }
    else if ( target.closest(".phone")) {
      blockCall.classList.remove("active")
    }
    else {
      return 0
    }
  })
})

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