Javascript 通过jquery添加新记录元素

我有一个表insite表单，在这里我希望能够复制一组字段任意多次。我还希望这些新字段组的属性的字段id、名称和标签增加1。到目前为止，我已经在jQuery中尝试了这个方法，并使它至少复制了字段组，但remove不起作用。我不知道如何为这3个属性中的每一个加1。我很感激能得到的任何帮助

    <tr>
        <td>name<span class="description"></span>
        </td>
        <td>
            <input type="text" name="type_1" id="type_11" class="regular-text" />
        </td>
    </tr>
    <tr>
        <td>pic<span class="description"></span>
        </td>
        <td>
            <input type="file" name="logo_1" id="logo_1" />
        </td>
    </tr>
    <div class="formRowRepeatingSection"><a href="#" class="addPro">Add New</a>
    </div>
<div class="repeatingSection"></div>

JS-Jquery

$(function(){
$('#addPro').click(function() {


    $('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1'+i+'[]" id="pro_1'+i+'[] class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1'+i+'[]" id="pro_pic_1'+i+'[]" /></td></tr>');



}); 
});  

我需要在“repeatingSection”中重新绘制此代码html，然后单击“addPro”

编辑：-

$(function(){
$('#addPro').click(function() {

    $('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1'+i+'[]" id="pro_1'+i+'[]" class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1'+i+'[]" id="pro_pic_1'+i+'[]" /></td></tr>');



}); 
});

我现在就编辑。。。。但我需要在单击addPro时插入新行

<table>
    <tr>
        <td>name<span class="description"></span>

        </td>
        <td>
            <input type="text" name="type_1" id="type_11" class="regular-text" />
        </td>
    </tr>
    <tr>
        <td>pic<span class="description"></span>

        </td>
        <td>
            <input type="file" name="logo_1" id="logo_1" />
        </td>
    </tr>
</table>
<div class="formRowRepeatingSection"><a href="#" id="addPro">Add New</a>

</div>
<div id="repeatingSection"></div>

jQuery

$(document).ready(function () {
    var i = 0;
    $('#addPro').click(function () {
        console.log(i);
        i++;
        $('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1' + i + '[]" id="pro_1' + i + '[]" class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1' + i + '[]" id="pro_pic_1' + i + '[]" /></td></tr>');
    });
});

演示 我改变的是：

在html:class中替换为元素中的ID和要附加到repeatingSection的div中的ID 添加了在此处关闭ID ID=pro_1'+i+'[]类=常规文本 加上var i=0；在click函数和i++之外；里面。 我还添加了开始和结束标记，也许你在代码中的其他地方没有发布它们。我添加的只是为了有正确的html标记。

---

但是删除不起作用。你希望从$this.val中得到什么？在该代码中，这是一个element@Sergio抱歉，我将在您定义的HTML中编辑我的代码addPro类，但在jQuery中，您的选择器正在查找addPro id。请使用$.addPro，否则您将错过在此处编辑id的剪辑id=pro_1'+i+'[]类=常规文本