jQuery动态添加删除功能

预览

源码

DOCTYPE html>



Title



    $(function () {
        //增加联系方式按钮事件
        $("#btn_add").click(function () {
            var div2 = $("
");
            div2.append($("电话"));
            div2.append($(""));
            //增加一个行内删除按钮
            var btn_divdel = $(" ");

            //行内删除按钮事件
            btn_divdel.click(function () {
                $(this).parent().remove();
            })

            div2.append(btn_divdel);
            $("#div1").append(div2);

        })

        //外部删除按钮事件
        $("#btn_del").click(function () {
            $("#div1").children().remove();
        })

        //外部清空按钮事件
        $("#btn_clean").click(function () {
            $("#div1").empty();
        })

    })