Javascript 如何"；淡出“&&引用；删除“；jQuery中的div？

我试图给一个div赋予淡出效果&单击图像时删除该div（id=“notification”）

我就是这样做的：

<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>

这似乎不起作用。 我需要做什么来修复此问题？

您尝试过吗

$("#notification").fadeOut(300, function(){ 
    $(this).remove();
});

也就是说，使用当前的this上下文以内部函数中的元素为目标，而不是id。我一直使用此模式-它应该可以工作。

尝试以下方法：

<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>

---

事件处理程序。这就是现在酷孩子们的做法。
你真的应该尝试在单独的文件中使用jQuery，而不是内联。以下是您需要的：

<a class="notificationClose "><img src="close.png"/></a>

如果你在几个不同的地方使用它，你应该把它变成一个插件

jQuery.fn.fadeOutAndRemove = function(speed){
    $(this).fadeOut(speed,function(){
        $(this).remove();
    })
}

然后：

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');

使用

如果你和我一样，在谷歌搜索中，希望删除带有酷动画的html元素，那么这可以帮助你：


$（文档）.ready（函数（）{
变量$deleteButton=$（'.deleteItem'）；
$deleteButton.on（'click'，函数（事件）{
event.preventDefault（）；
var$按钮=$（此按钮）；
如果（确认（'你确定吗？'））{
变量$item=$button.closest（'tr.item'）；
$item.addClass（'removed-item'）
.one（'webkitAnimationEnd oanimationend msAnimationEnd animationend'，函数（e）{
$（this.remove（）；
});
}
});
});
/**
*莎拉·苏伊丹的功劳
*@linkhttps://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css
*/
.删除的项目{
-webkit动画：删除项目动画.8s立方贝塞尔（.65，-0.02,72,29）；
-o-animation：删除项目动画.8s立方贝塞尔（.65，-0.02,72,29）；
动画：删除项目动画.8s立方贝塞尔（.65，-0.02，.72，.29）
}
@关键帧已删除项动画{
0% {
不透明度：1；
-webkit转换：translateX（0）；
-ms变换：translateX（0）；
-o变换：translateX（0）；
转换：translateX（0）
}
30% {
不透明度：1；
-webkit转换：translateX（50px）；
-ms变换：translateX（50px）；
-o-变换：translateX（50px）；
转换：translateX（50px）
}
80% {
不透明度：1；
-webkit转换：translateX（-800px）；
-ms转换：translateX（-800px）；
-o变换：translateX（-800px）；
转换：translateX（-800px）
}
100% {
不透明度：0；
-webkit转换：translateX（-800px）；
-ms转换：translateX（-800px）；
-o变换：translateX（-800px）；
转换：translateX（-800px）
}
}
@-webkit关键帧已删除项动画{
0% {
不透明度：1；
-webkit转换：translateX（0）；
转换：translateX（0）
}
30% {
不透明度：1；
-webkit转换：translateX（50px）；
转换：translateX（50px）
}
80% {
不透明度：1；
-webkit转换：translateX（-800px）；
转换：translateX（-800px）
}
100% {
不透明度：0；
-webkit转换：translateX（-800px）；
转换：translateX（-800px）
}
}
@-o关键帧已删除项动画{
0% {
不透明度：1；
-o变换：translateX（0）；
转换：translateX（0）
}
30% {
不透明度：1；
-o-变换：translateX（50px）；
转换：translateX（50px）
}
80% {
不透明度：1；
-o变换：translateX（-800px）；
转换：translateX（-800px）
}
100% {
不透明度：0；
-o变换：translateX（-800px）；
转换：translateX（-800px）
}
}

JS-Bin
身份证件
名字
姓氏
@推特
行动
1.
努尔埃丁
ECH-CHEBABY
@__车贝儿
删除
2.
约翰
雌鹿
@约翰多
删除
3.
简
雌鹿
@珍妮多
删除
.fadeOut（'slow'，this.remove）
 你不应该内联使用JavaScript，因为这样很难以一致的方式进行更改。我不允许这样做，我只是在帮助他解决问题。有时我说教，我只是醒来，我没有“额外英里”的心情。不过，你的职位可以胜任这项工作。：）你能详细说明一下onclick处理器是如何邪恶的吗？这仅仅是因为可维护性，还是因为技术原因？当你想在一个页面上使用一行JavaScript时，它真的值得一个单独的文件吗？我想内联有它的位置。我试过了，但没能让它工作。上面的内联链接确实有效，而且两者实际上是相同的。这是@安迪：首先，你忘了将库设置为jQuery；）第二，如果您在站点上使用它，您还需要将它包装在
$（document）.ready（function（）{
和
}）中。（在jsFiddle上，它是onload的，所以它可以为您实现这一点）@Nick Berardi，我们可以用页面向下滚动来实现吗？问题15票，答案55票。。。很明显这只是一个打字错误。。。wtf？现在是34和110:）。在这里登陆是因为我不知道如何在元素消失后删除它（你可能会猜到：我没有RTFM）。不管输入错误是什么，问题都会出现在谷歌结果中，当我快速找到答案时，我会向上投票。如果问题中有输入错误，这并不重要。我找了一个，因为我想知道怎么做。这个问题问了我想问的问题，有一个有效的答案。因此，我正在研究如何做到这一点，出于我的目的，“插件”方式对我来说更好，感谢这不起作用，
remove
方法在
fadeOut
// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');

.fadeOut(360).delay(400).remove();