jquery 实现div动态增加和删除

HTML

<div id="parameterFather">

</div>

jQuery

<script type="text/javascript">
        var blockNum = 10;//参数内容最多添加10个
        $(document).ready(function () {
            //实现动态添加参数div
            $('#btnAdd').click(function () {
                var parentDom = $('#parameterFather'), oriDom = parentDom.children(":first");
                var clLength = parentDom.children().length;
                if (clLength == 0) {
                    //第一次添加 参数内容
                    var nowDom = '<div class="control-group">\n' +
                        '                <label class="control-label">参数名称：</label>\n' +
                        '                <div class="controls">\n' +
                        '                    <input name="parameterName" \n' +
                        '                           class="input-xlarge"/>\n' +
                        '                    <input type=\'button\' class=\'btn\' value=\'删除\' onclick="$(this).parent().parent().remove();"/>\n' +
                        '                </div>\n' +
                        '            </div>';
                    parentDom.append(nowDom);
                }
                if (blockNum > clLength) {
                    var nowDom = oriDom.clone();
                    nowDom.children().find("[name='parameterName']").attr("value", "")//清空input的value值
                    parentDom.append(nowDom);
                }
                else return false;
            });
        });
    </script>