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>