jquery動態新增表單刪除表單
阿新 • • 發佈:2018-12-30
//html部分
<div class="form-group col-sm-12" id="group"> <label for="" class="col-sm-1 control-label"><span style="color: red">*</span>屬性1:</label> <div class="col-sm-1"> <input type="text" class="form-control" name=" " placeholder="請輸入屬性值" /> </div><div class="col-sm-1"> <input type="text" class="form-control" name="roleCode" placeholder="請輸入屬性值" /> </div> <div class="col-sm-1"> <input type="text" class="form-control" name="roleCode" placeholder="請輸入屬性值" /> </div> <span id="addInput" class="col-sm-1"><i class="fa fa-plus fa-2" aria-hidden="true"></i></span> </div>
//js部分
/*新增刪除屬性表單*/ $(function () { $("#addInput").click(function () { if( $("#group").find("div[ref='add']").length==0){ $(this).before('<div id="0" ref="add" class="col-sm-1"><input type="text" class="form-control" placeholder="請輸入屬性值">'+ '<span onclick="deleteDiv(0)" class="fa fa-minus"></span></div>'); }else{ var i=$("#group").find("div[ref='add']").length; $(this).before('<div id="'+i+'" ref="add" class="col-sm-1"><input type="text" class="form-control"' + ' placeholder="請輸入屬性值"><span onclick="deleteDiv('+i+')" class="fa fa-minus"></span></div>'); } }); }); function deleteDiv(id){ $("div[id="+id+"]").remove(); }