html中元素動態新增與刪除
阿新 • • 發佈:2018-11-06
<div class="unit" > <label>產品引數</label> <input type="button" value="新增" onclick="addProductParam()"/> </div> <div id="paramDiv"> <c:forEach items="${list}" var="item" varStatus="s"> <div class="unit"> <input type="text" name="param_key_input" size="30" value="${item.pkey }"/> <input type="text" name="param_value_input" size="30" value="${item.pvalue }"/> <input type="button" value="新增" onclick="addProductParam()"/> <input class="input_param" type="button" value="刪除"/> </div> </c:forEach> </div>
<script> function addProductParam(){ var addcontent = ''; addcontent += '<div class="unit"> <input type="text" name="param_key_input" size="30" class="textInput"/><input type="text" name="param_value_input" size="30" class="textInput"/><input type="button" value="新增" onclick="addProductParam()"/><input class="input_param" type="button" value="刪除"/> </div> '; $("#paramDiv").append(addcontent); } $('.input_param').bind('click',function(){ $(this).parent().remove(); }) </script>