javascript - 使用 Vanilla Javascript 关闭多个弹出消息框

Question

我想知道如何使用纯 Javascript 通过单击关闭按钮来关闭多个弹出框。

我试过下面的代码，但没有用。

JavaScript

const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
    button.addEventListener('click', () => {
        this.parentElement.querySelector('.popup').style.display = 'none';
    });
}); 

HTML

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.1
        </div>
    </div>
</div>

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.2
        </div>
    </div>
</div>

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.3
        </div>
    </div>
</div>

CSS

.popup {
    border: 3px solid gray;
}
.button {
    position: absolute;
    left: -15px;
    top: -15px;
    display: block;
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}
.content-wrapper {
    max-height: 50vh;
    overflow-y: auto;
    padding: 20px;
} 
.content {
    overflow: hidden;    
}

.popup {
    width: 300px;
    position: relative;
    position: fixed;
    right:30px;
}

.popup:nth-child(1) {
    bottom:30px;
}
.popup:nth-child(2) {
    bottom:130px;
}
.popup:nth-child(3) {
    bottom:230px;
}

Answer 1

const buttons = Array.prototype.slice.call(document.querySelectorAll('.button'));
buttons.forEach((button) => {
    button.addEventListener('click', () => {  
    button.parentElement.style.display ='none';
    });
});

.popup {
    border: 3px solid gray;
}
.button {
    position: absolute;
    left: -15px;
    top: -15px;
    display: block;
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}
.content-wrapper {
    max-height: 50vh;
    overflow-y: auto;
    padding: 20px;
} 
.content {
    overflow: hidden;    
}

.popup {
    width: 300px;
    position: relative;
    position: fixed;
    right:30px;
}

.popup:nth-child(1) {
    bottom:30px;
}
.popup:nth-child(2) {
    bottom:130px;
}
.popup:nth-child(3) {
    bottom:230px;
}

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.1
        </div>
    </div>
</div>

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.2
        </div>
    </div>
</div>

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.3
        </div>
    </div>
</div>