js 实现动态的添加或者删除子元素实例

    <div style="display:none" id="actual_ralationship">
        <div class="form-group">
            <label class="col-sm-2 control-label" style="padding-right: 8px;padding-left: 8px;">最多紧急联系人数量</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="emergency_contact_max_number" value="3">
            </div>
        </div>
        <div class="row" id="relationship_div">
                <label class="col-sm-2 control-label" style="padding-right: 8px;padding-left: 8px;">必填紧急联系人限制</label>
                <div class="form-inline">
                    关系&nbsp;
                    <select  class="form-control" name="relationship[]">
                        <?php foreach($relation_ships as $relationship) {?>
                        <option value="<?= $relationship ;?>"><?= $relationship ;?></option>
                        <?php }?>
                    </select>&nbsp;
                    数量&nbsp;
                    <input type="text" class="form-control" name="emergency_contact_limit_number[]" value="1">&nbsp;
                    <button type="button" id="add_element" class="btn btn-default">+</button>
                </div>
        </div>
    </div>
    

<script type="text/javascript">
    $(function(){

        // 紧急联系人添加事件
        $("#add_element").click(function() {
        var item_relationship = '<div class="form-inline">\n' +
            '<label class="col-sm-2 control-label" style="padding-right: 8px;padding-left: 8px;"></label>\n' +
            '                    关系&nbsp;\n' +
            '                    <select  class="form-control" name="relationship[]">\n' +
            '                        <?php foreach($relation_ships as $relationship) {?>\n' +
            '                        <option value="<?= $relationship ;?>"><?= $relationship ;?></option>\n' +
            '                        <?php }?>\n' +
            '                    </select>&nbsp;\n' +
            '                    数量&nbsp;\n' +
            '                    <input type="text" class="form-control" name="emergency_contact_limit_number[]" value="1">&nbsp;\n' +
            '                    <button type="button" class="btn btn-default disappear_element" οnclick="disappearElement($(this))" style="width: 34px">-</button>\n' +
            '                </div>';
            $('#relationship_div').append(item_relationship);
        });

    });

    // 紧急联系人关系删减事件
    function disappearElement(that) {
        $(that).parent().remove();
    }

    // api ui 接入对紧急联系人的影响
    $(":radio[name=source]").change(function(){
        if ($(this).val() === 'api') {
            $("#actual_ralationship").css('display', 'block');
        } else {
            $("#actual_ralationship").css('display', 'none');
        }
    });

    // 联系人页面的触发紧急联系人是否显示
    $(":radio[name=contactor_page]").change(function(){

        // radio的选中与否都是初始化的时候定下的
        if ($(this).val() === 'Y') {
            $("#actual_ralationship").css('display', 'block');
        } else {
            $("#actual_ralationship").css('display', 'none');
        }
    });

    function radioControlRelation(that) {

        if ($(that).val() === 'Y') {
            $("#actual_ralationship").css('display', 'block');
        } else {
            $("#actual_ralationship").css('display', 'none');
        }
    }
</script>