按照你的要求,做了一个示例,把一个已经绑定了点击事件的元素,移动到另一个地方,事件任然有效。代码如下:
HTML:
<div id="a"><span class="test">测试</span></div><div id="b"></div>
<button>移动测试节点</button>
jQuery:
$('.test').click(function() {alert('我在ID为 ' + $(this).parent().attr('id') + ' 的元素中点击了测试内容')
})
$('button').click(function() {
$('#b').append($('.test'))
})
测试过程截图:
1、初始化:
2、点击“测试”:
3、点击“移动测试节点”:
4、再次点击“测试”:
使用jquery库的函数:remove()。
功能思路:展现一个UL,然后设计一个按钮,通过绑定删除函数,点击时删除所有LI节点。
实例演示如下:
1、设计简单的一个页面,其中html代码如下:
简单的样式文件:
此时的页面内容展示如下:
2、设计JS代码,实现删除函数。
3、实例操作,点击按钮,实现节点删除,展示如下:
完成设计,此时的DOM节点如下:
扩展资料:
remove函数详情解析:
1、定义和用法:
remove() 方法移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。
2、语法:
$(selector).remove()。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta http-equiv="content-type" content="text/htmlcharset=GBK">
<title>js appendChild removeChild 添加 删除 子节点</title>
<script type="text/javascript">
function createSpan(){
var span=document.createElement_x_x("span")
span.innerHTML="子节点"
document.getElementByIdx("content").appendChild(span)
}
function deleteSpan(){
var content=document.getElementByIdx("content")
//var childs=content.childNodes//ie 和ff 获取子节点不一致(ff会将TEXT_NODE计入在内)
var childs=content.getElementsByTagName_r("span")
if(null!=childs){
content.removeChild(childs[childs.length-1])
}
}
</script>
</head>
<body>
<div id='content' style='background-color:#ff0000'>
<span>节点</span>
</div>
<input type='button' onclick="createSpan()" value="创建节点"/>
<input type='button' onclick="deleteSpan()" value="删除节点"/>
</body>
</html>