jquery随意添加移除html的实现代码

166 阅读 0 评论 110 点赞

我是靠谱客的博主落寞飞鸟，最近开发中收集的这篇文章主要介绍jquery随意添加移除html的实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html代码：

复制代码代码如下:

 
<ul id="list3" class="eventlist"> 
<li>plain</li> 
<li class="special">special <button>I am special</button></li> 
<li>plain</li> 
</ul> 

script代码：

复制代码代码如下:

 
function addRemoveItemNS() { 
var $newLi = $('<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>'); 
$('#list3 li.special') 
.find('button.addone') 
.unbind('click.addit') 
.bind('click.addit', function() { 
$(this).parent().after($newLi); 
addRemoveItemNS(); 
}) 
.end() 
.find('button.removeme') 
.unbind('click.removeit') 
.bind('click.removeit', function() { 
$(this).parent().remove(); 
}); 
} 
$(document).ready(function() { 
addRemoveItemNS(); 
}); 