站长资源网络编程

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

整理:jimmy2026/8/6浏览2
简介html代码: 复制代码 代码如下:
  • plain
  • special
  • plain
  • 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();
    });

    可以随意添加移除html代码。