Удаление блока 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">✖</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">✖</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
}
})
})