我正试图给div& amp;单击图像时删除该div(id =“notification”)。
这就是我这样做的方式:
<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>
这似乎不起作用。 我需要做些什么来解决这个问题?
答案 0 :(得分:406)
试试这个:
<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>
我认为onclick
周围的双引号使其失效。 :)
编辑:正如下面所指出的,内联javascript是邪恶的,您应该将其从onclick
中取出并将其移至jQuery的click()
事件处理程序。这就是酷孩子们现在正在做的事情。
答案 1 :(得分:89)
你真的应该尝试在单独的文件中使用jQuery,而不是内联。这就是你需要的:
<a class="notificationClose "><img src="close.png"/></a>
然后在页面底部的<script>
标签中至少或在外部JavaScript文件中。
$(".notificationClose").click(function() {
$("#notification").fadeOut("normal", function() {
$(this).remove();
});
});
答案 2 :(得分:52)
如果你在几个不同的地方使用它,你应该把它变成一个插件。
jQuery.fn.fadeOutAndRemove = function(speed){
$(this).fadeOut(speed,function(){
$(this).remove();
})
}
然后:
// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
答案 3 :(得分:29)
你试过这个吗?
$("#notification").fadeOut(300, function(){
$(this).remove();
});
也就是说,使用当前的 this 上下文来定位内部函数中的元素而不是id。我一直使用这种模式 - 它应该有效。
答案 4 :(得分:2)
如果你像我一样来自谷歌搜索,并希望删除一个酷动画的HTML元素,那么这可以帮助你:
$(document).ready(function() {
var $deleteButton = $('.deleteItem');
$deleteButton.on('click', function(event) {
event.preventDefault();
var $button = $(this);
if(confirm('Are you sure about this ?')) {
var $item = $button.closest('tr.item');
$item.addClass('removed-item')
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(this).remove();
});
}
});
});
&#13;
/**
* Credit to Sara Soueidan
* @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css
*/
.removed-item {
-webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
-o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}
@keyframes removed-item-animation {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
30% {
opacity: 1;
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
-o-transform: translateX(50px);
transform: translateX(50px)
}
80% {
opacity: 1;
-webkit-transform: translateX(-800px);
-ms-transform: translateX(-800px);
-o-transform: translateX(-800px);
transform: translateX(-800px)
}
100% {
opacity: 0;
-webkit-transform: translateX(-800px);
-ms-transform: translateX(-800px);
-o-transform: translateX(-800px);
transform: translateX(-800px)
}
}
@-webkit-keyframes removed-item-animation {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
30% {
opacity: 1;
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
80% {
opacity: 1;
-webkit-transform: translateX(-800px);
transform: translateX(-800px)
}
100% {
opacity: 0;
-webkit-transform: translateX(-800px);
transform: translateX(-800px)
}
}
@-o-keyframes removed-item-animation {
0% {
opacity: 1;
-o-transform: translateX(0);
transform: translateX(0)
}
30% {
opacity: 1;
-o-transform: translateX(50px);
transform: translateX(50px)
}
80% {
opacity: 1;
-o-transform: translateX(-800px);
transform: translateX(-800px)
}
100% {
opacity: 0;
-o-transform: translateX(-800px);
transform: translateX(-800px)
}
}
&#13;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>id</th>
<th>firstname</th>
<th>lastname</th>
<th>@twitter</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr class="item">
<td>1</td>
<td>Nour-Eddine</td>
<td>ECH-CHEBABY</td>
<th>@__chebaby</th>
<td><button class="btn btn-danger deleteItem">Delete</button></td>
</tr>
<tr class="item">
<td>2</td>
<td>John</td>
<td>Doe</td>
<th>@johndoe</th>
<td><button class="btn btn-danger deleteItem">Delete</button></td>
</tr>
<tr class="item">
<td>3</td>
<td>Jane</td>
<td>Doe</td>
<th>@janedoe</th>
<td><button class="btn btn-danger deleteItem">Delete</button></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</body>
</html>
&#13;
答案 5 :(得分:-1)
.fadeOut('slow',this.remove);
答案 6 :(得分:-9)
使用
.fadeOut(360).delay(400).remove();