动态添加和删除jquery按钮
问题描述:
JavaScript和jQuery的新手,但我试图动态添加按钮,然后删除它们,当他们被点击。如果一个按钮已经存在了(在同一个类中,我创建了新的按钮),它可以被删除。如果用户添加了新按钮,则该按钮无法控制。我也尝试了在类似帖子中提到的.live
方法无济于事。任何帮助表示赞赏。谢谢。动态添加和删除jquery按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> test </title>
<script src="jquery-1.6.2.js"></script>
<script>
/*
$(document).ready(function(){
$(".btn :button").click(function(){
$(this).remove();
});
*/
$(".btn :button").live("click", function(){
$(this).remove();
});
function add() {
// $(".btn").append("<button> new one </button>");
$("<button> new one </button>").insertAfter(".btn");
};
</script>
</head>
<body>
<div class="btn">
<button> test </button>
</div>
<br /><br />
<div class="adding">
<button onclick='add()'> add </button>
</div>
</body>
</html>
答
$("button").live("click", function(){
$(this).remove();
});
,或者,如果你想删除父容器,以及:
$("button").live("click", function(){
$(this).parent().remove();
});
UPDATE:
如果你只想要一个特定的div里面的按钮,试试这个:
$(".adding button").click(function() {
$('.adding').before('<div class="btn"><button>new one</button></div>');
});
$(".btn button").live("click", function() {
$(this).parent().remove();
});
答
你不需要一个:
前button
选择
$(".btn button").live("click", function(){
$(this).remove();
});
+0
感谢您的答复和投票。出于某种原因,这对我不起作用。我尝试了与没有冒号的第一次发布相同的代码,它仍然没有效果。不确定是否有任何浏览器问题,但它不适用于Chrome浏览器或Safari浏览器。我尝试了jquery的托管版本(来自jquery下载页面),以防我的问题出现,但仍然没有任何结果。如果我能找出问题 – jtwg
感谢您的回复,我会重新发布,但这也会删除我的添加按钮。它存在于不同的div中。否则,它似乎工作,所以我很有希望。感谢您的帮助 – jtwg
已更新。检查出来:http://jsfiddle.net/samliew/X2dR8/ –
谢谢。这很棒。 – jtwg