代码之家  ›  专栏  ›  技术社区  ›  TheBoubou codingbadger

使用jQuery动态添加/删除HTML元素

  •  3
  • TheBoubou codingbadger  · 技术社区  · 14 年前

    我发现 this great code 在这里 Demo . 我只是需要一些零钱。我想

    • 一个按钮逐行删除当前行
    • 删除前的确认

    你能帮我吗?

    更新1: 我想要这个 alt text http://imagik.fr/thumb/275405.jpeg

    1 回复  |  直到 14 年前
        1
  •  5
  •   Reigel Gallarde    14 年前

    demo

    html格式

    <form id="myForm">
        <div style="margin-bottom:4px;" class="clonedInput">
            <input type="button" class="btnDel" value="Delete" disabled="disabled" />
            <input type="text" name="input1" />
        </div>
    
        <div>
            <input type="button" id="btnAdd" value="add another name" />
        </div>
    </form>​
    

    $(document).ready(function() {
    
        var inputs = 1; 
    
        $('#btnAdd').click(function() {
            $('.btnDel:disabled').removeAttr('disabled');
            var c = $('.clonedInput:first').clone(true);
                c.children(':text').attr('name','input'+ (++inputs) );
            $('.clonedInput:last').after(c);
        });
    
        $('.btnDel').click(function() {
            if (confirm('continue delete?')) {
                --inputs;
                $(this).closest('.clonedInput').remove();
                $('.btnDel').attr('disabled',($('.clonedInput').length  < 2));
            }
        });
    
    
    });
    

    资源