Javascript 需要onclick事件，使div淡出“；然后"；删除div

所以我有了div的代码。我所需要的就是让div淡出，然后在淡出后将父项和子项移除

HTML

<div onclick="fadeOut(this)" id="fadeOut">
    <div id="divText">
        This is a simple div with some text in it. This is another line of text.
        All I am doing is continuing adding text to my div container. If I keep adding text guess what will happen. You have to scroll to see the rest!
    </div>
</div>

<div id="fadeOut">
   <!--Content Here -->
</div>

这是一个简单的div，其中包含一些文本。这是另一行文字。
我所做的就是继续向div容器中添加文本。如果我继续添加文本，猜猜会发生什么。你必须滚动才能看到剩下的！

---

CSS位于JSFIDLE链接中。

您通过标记指示

jQuery

，因此这里是一个jQuery解决方案。它将回调函数传递给

fadeOut

函数，该函数将删除

#divText

function fadeOut(i) {
    $(i).fadeOut(3000, function(){
        $("#divText").remove();
    });
}

我建议的一个改进是通过javascript而不是内联连接事件处理程序

Javascript

$("#fadeOut").click(function(){
     $(this).fadeOut(3000, function(){
        $("#divText").remove();
    });
});

HTML

<div onclick="fadeOut(this)" id="fadeOut">
    <div id="divText">
        This is a simple div with some text in it. This is another line of text.
        All I am doing is continuing adding text to my div container. If I keep adding text guess what will happen. You have to scroll to see the rest!
    </div>
</div>

<div id="fadeOut">
   <!--Content Here -->
</div>

---

jsfiddle:

我知道jQuery的解决方案

$("#fadeout").ckick(function(){
$(this).find("div").fadeOut().parent().remove();
});

---

使用淡出jquery函数可以很容易地做到这一点

例如：

$( "#buttonID" ).click(function() {
    $( "#thedivID" ).fadeOut( "slow", function() {
        //this removes the div from the DOM
        $( "#thedivID" ).remove();
    });
});

---

请参阅此处的更多示例和文档：

是否要删除淡出或div文本