1. 程式人生 > >html中元素動態新增與刪除

html中元素動態新增與刪除

<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>