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">
关系 
<select  class="form-control" name="relationship[]">
<?php foreach($relation_ships as $relationship) {?>
<option value="<?= $relationship ;?>"><?= $relationship ;?></option>
<?php }?>
</select> 
数量 
<input type="text" class="form-control" name="emergency_contact_limit_number[]" value="1"> 
<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' +
'                    关系 \n' +
'                    <select  class="form-control" name="relationship[]">\n' +
'                        <?php foreach($relation_ships as $relationship) {?>\n' +
'                        <option value="<?= $relationship ;?>"><?= $relationship ;?></option>\n' +
'                        <?php }?>\n' +
'                    </select> \n' +
'                    数量 \n' +
'                    <input type="text" class="form-control" name="emergency_contact_limit_number[]" value="1"> \n' +
'                    <button type="button" class="btn btn-default disappear_element" onclick="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>