在纯javascript中隐藏div onclick

我想知道如何在纯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>

&时代；
你的帐户上还有三个信用卡。
&时代；
配置文件详细信息已更新。
&时代；
你的帐户三天后到期。
&时代；
文件已删除。

首先，您需要为所有需要实现相同功能的div元素添加一个公共类。例如，让我们将该类命名为“Hiddeble”：

/// Html
<div class='hideable'></div>

// Javascript
var elements = document.getElementsByClassName('hideable');

for(var i=0; i<elements.length; i++)
{
    var element = elements[i];
    element.addEventListener('click', onClick);
}

function onClick(event){
    event.target.style.display = 'none';
}

///Html
//Javascript
var elements=document.getElementsByClassName（'hidable'）；
对于（var i=0；i首先，您需要为需要实现相同功能的所有div元素添加一个公共类。例如，让我们将该类命名为“hidable”：

/// Html
<div class='hideable'></div>

// Javascript
var elements = document.getElementsByClassName('hideable');

for(var i=0; i<elements.length; i++)
{
    var element = elements[i];
    element.addEventListener('click', onClick);
}

function onClick(event){
    event.target.style.display = 'none';
}

///Html
//Javascript
var elements=document.getElementsByClassName（'hidable'）；
对于（var i=0；i这样的东西就足够了。这将只隐藏单击的div。如果您提出请求，我将解释这是如何工作的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").click(function(){
        $(this).hide();
    });
});
</script>

<div>
    one
</div> 
<div>
    two
</div>


$（文档）.ready（函数（）{
$（“div”）。单击（函数（）{
$（this.hide（）；
});
});
一
二
这样就足够了。这将只隐藏单击的div。如果您提出请求，我将解释这是如何工作的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").click(function(){
        $(this).hide();
    });
});
</script>

<div>
    one
</div> 
<div>
    two
</div>


$（文档）.ready（函数（）{
$（“div”）。单击（函数（）{
$（this.hide（）；
});
});
一
二
使用事件委派。只设置一次单击处理程序，并与动态添加的警报一起使用

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;
}

演示：
使用事件委派。只设置一次单击处理程序，并可与动态添加的警报一起使用

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;
}

演示：
getElementsByClassName
或
queryselectoral
？document.queryselectoral？为什么不使用
document.getElementById
？
getElementsByClassName
或
queryselectoral
？document.queryselectoral？为什么不使用
document.getElementById
？它似乎它们已经有了一个通用的警报类。
document.querySelectorAll（'.alert'）
比
document.getElementsByClassName（'alert'）得到更广泛的支持
。此外，onClick函数可以是
this.style.display='none'
。我认为他只希望被单击的div被隐藏，而不是共享同一类的所有div在单击一个div时一次被隐藏。@RobG queryselectoral在IE 8中有部分支持，而getElementsByClassName没有任何支持IE 8中的rt。这是唯一的区别。只需添加
querySelectorAll
将返回一个非活动节点元素列表。@frosty您是对的，这是他想要的行为，这正是此代码实现的行为。看起来他们已经有了一个通用的警报类。
document.querySelectorAll（'.alert'））
比
document.getElementsByCassName（'alert'）得到更广泛的支持
。此外，onClick函数可以是
this.style.display='none'
。我认为他只希望被单击的div被隐藏，而不是共享同一类的所有div在单击一个div时一次被隐藏。@RobG queryselectoral在IE 8中有部分支持，而getElementsByClassName没有任何支持IE 8中的rt。这是唯一的区别。只需添加
querySelectorAll
将返回一个非活动节点元素列表。@frosty你是对的，这是他想要的行为，这正是这段代码实现的行为。问题是针对普通Javascript，而不是jquery。我相信OP要求的是纯Javascript，而不是Jquery.我理解..但是OP要求使用“纯JavaScript”，这意味着他要么不感兴趣，要么已经知道如何在Jquery中实现这一点。我认为“纯JavaScript”的公认定义是不使用jQuery这样的框架的javascript。例如，如果查看JSFIDLE并展开library下拉列表，您将看到一个值为“No library（pure JS）”的项@BenGuest啊。那是我的错误。问题是纯Javascript，而不是jquery。我相信OP要求纯Javascript，而不是jquery。我理解。但是OP要求的是“纯Javascript”，意思是他要么不感兴趣，要么已经知道如何在jquery中做到这一点。我认为“纯Javascript”的公认定义是不使用jQuery这样的框架的javascript。例如，如果您查看JSFIDLE并展开library下拉列表，您将看到一个值为“No library（pure JS）”@BenGuest Ah的项。那么我的错误是什么呢。