javascript - 在纯javascript中隐藏div onclick

Question

我想知道如何在 pure javascript 中隐藏 div onclick 而不使用 getElementById 之类的东西>.

这样做的目标是在 div 的数量 未知的情况下进行扩展和工作。

这是仅隐藏第一个 div 的当前模式:

document.getElementById('msg0').addEventListener('click',function(e){
    document.getElementById('msg0').style.display = 'none';
});

这里是示例 div:

<div class="alert alert-info" id="msg0">
    <button data-dismiss="alert" class="close">
    &times;
    </button>
    <i class="fa fa-check-circle"></i>
    Three credits remain in your account.
</div>

<div class="alert alert-success" id="msg1">
    <button data-dismiss="alert" class="close">
    &times;
    </button>
    <i class="fa fa-check-circle"></i>
    Profile details updated.
</div>

<div class="alert alert-warning" id="msg2">
    <button data-dismiss="alert" class="close">
    &times;
    </button>
    <i class="fa fa-check-circle"></i>
    Your account expires in three days.
</div>

<div class="alert alert-danger" id="msg3">
    <button data-dismiss="alert" class="close">
    &times;
    </button>
    <i class="fa fa-check-circle"></i>
    Document deleted.
</div>

Answer 1

使用事件委托(delegate)。仅设置一个点击处理程序，并与动态添加的警报一起使用。

document.addEventListener('click', function (event) {
    var alertElement = findUpTag(event.target, '.alert');

    if (alertElement) {
       alertElement.style.display = 'none';
    }
});

function findUpTag(el, selector) {
    if (el.matches(selector)) {
        return el;
    }

    while (el.parentNode) {
        el = el.parentNode;
        if (el.matches && el.matches(selector)) {
            return el;
        }
    }
    return null;
}

演示:http://jsfiddle.net/ht2qp6zj/3/