jQuery动态添加元素后，为什么不能动态删除？

<html>
<head>
<meta charset="utf8">
<title>jquery动态添加的元素为何不能删除</title>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<style type="text/css">

.row{width:200px;height:500px;background: yellow;}
.one{width:200px;height:50px;background: green;}
</style>
</head>
<body>
<button id='add'>新增元素</button>
<div class="row">
<div class="one">
<span>删除</span>
</div>
<div class="one">
<span>删除</span>
</div>
</div>
</body>
<script type="text/javascript">

var str ="<div class='one' style='font-weight:bold;' >新添加的元素 <sapn>删除</span></div>";
$(document).ready(function(){
$("button").click(function(){
$(".row").append(str);
});
});

$('span').click(function(){
$(this).parent().remove();
})
</script>
</html>

举报该文章

相关建议 2015-03-31

é¦åï¼ä½ çæ ç¾éäº<sapn>å é¤</span>ï¼åºè¯¥æ¯spanï¼ä½ åéäºã

$("span").on("click",function(){
$(this).parent().remove();
})è¿½é®

è¿½ç$("span").on("click",function(){
$(".one").remove();
})è¿½é®

æè¿è¾¹è¿æ¯ä¸è¡ï¼ä½ é£è¾¹è¿è¡è¯äºåï¼

è¿½ç

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/ppv44pvss4vm2mq22q7.html

其他看法

第1个回答推荐于2018-03-04

<!DOCTYPE html>
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>
RunJS 演示代码
</title>
<style type="text/css">
.row{
width:200px;
height:500px;
background: yellow;
}
.one{
width:200px;
height:50px;
background: green;
}
</style>
<script type="text/javascript">
var str ="<div class='one' style='font-weight:bold;'><span>新添加的元素删除</span></div>";
$(document).ready(function(){
$("button").click(function(){
$(".row").append(str);
});
$(".row").delegate("span","click",function(){
$(this).closest("div").remove();
});
});
</script>
  </head>
<body>
    <button id='add'>
新增元素
</button>
<div class="row">
<div class="one">
<span>
删除
</span>
</div>
<div class="one">
<span>
删除
</span>
</div>
</div>
  </body>
</html>

追问

为什么
$('span').click(function(){
$(this).parent().remove();
})
我这样写不行？啥原因？

本回答被提问者采纳

第2个回答 2016-02-03

jQuery动态添加元素后，可以动态删除的，不能删除是因为没有找到对应的节点。
举例如下：
//This prototype function allows you to remove even array from array
Array.prototype.remove = function(x) {
var i;
for(i in this){
if(this[i].toString() == x.toString()){
this.splice(i,1)
}
}
}

第3个回答 2015-03-31

后添加的元素是没有绑定click事件的.得重新绑定一下追问

怎么绑定？我不会写。。

追答

jQuery动态添加元素后，为什么不能动态删除？

jquery动态添加的元素为何不能删除

.row{width:200px;height:500px;background: yellow;}
.one{width:200px;height:50px;background: green;}

新增元素

删除

删除

var str ="新添加的元素删除";
$(document).ready(function(){
$("button").click(function(){
$(".row").append(str);
$('span').click(function(){
$(this
});
});

$('span').click(function(){
$(this).parent().remove();
})

错了……手机编辑不方便，明天发给你吧

第4个回答 2015-03-31

不用remove()方法，用detach()追问

我试了，代替掉remove不行。。

相似回答

大家正在搜