jQuery的parent（）。remove（）問題

Question

我試圖用jQuery克隆和刪除表，但沒有成功。 這是我要操作的表的示例：

<table>
    <tr>
        <td colspan="6" class="linha_space"></td>
    </tr>
    <tr>
        <td colspan="3">Dummy1</td>
        <td colspan="3">Dummy2</td>
    </tr>
    <tr>
        <td colspan="2"><input name="aperf_cursos[]" type="text" /></td>
        <td colspan="2"><input name="aperf_entidades[]" type="text" /></td>
        <td colspan="2"><a href="javascript:void(0);" class="adicionar" onclick="add(this);"><img src="./images/add.gif" /></a><a href="javascript:void(0);" class="remover" onclick="remove(this);" style="display: none;"><img src="./images/delete.gif" /></a></td>
    </tr>
    <tr>
        <td colspan="6" class="linha_space"></td>
    </tr>
</table>

現在，javascript函數add（）和remove（）：

function add(o){
    var o = $(o);
    var tr = o.parent().parent().parent();
    tr.after(tr.clone()); 
    tr.find('.adicionar').remove();
    tr.find('.remover').show();
    tr.next().find('input, select').val('');
    tr.next().find('.remover').hide();
}
function remove(o){
    var o = $(o);
    o.parent().parent().parent().remove(); 
}

add（this）可以正常工作，但是remove（this）不能正常工作，它只會刪除我的“ delete.gif”圖像。 請問我做錯了什么？

Answer 1

而不是這個parent.parent.parent瘋狂（這是瘋狂的，是的）您為什么不使用

element.closest（“ tr”）

找到它所在的行？

這種方法將始終如一地工作。

Answer 2

看一下jsFiddle 。

我使用jQuery來滿足您的需求。

<table>
    <tr>
        <td colspan="6" class="linha_space"></td>
    </tr>
    <tr>
        <td colspan="3">Dummy1</td>
        <td colspan="3">Dummy2</td>
    </tr>
    <tr>
        <td colspan="2"><input name="aperf_cursos[]" type="text" /></td>
        <td colspan="2"><input name="aperf_entidades[]" type="text" /></td>
        <td colspan="2"><a href="#" class="adicionar">Add</a><a href="#" class="remover" style="display: none;">Delete</a></td>
    </tr>
    <tr>
        <td colspan="6" class="linha_space"></td>
    </tr>
</table>

$(function() {
    $(document).on('click', '.adicionar', function(event){
        var o = $(event.target);
        var tr = o.closest('table');
        tr.after(tr.clone()); 
        tr.find('.adicionar').remove();
        tr.find('.remover').show();
        tr.next().find('input, select').val('');
        tr.next().find('.remover').hide();
    });

    $(document).on('click', '.remover', function(event){
        var o = $(event.target);
        var table = $(o.closest('table')); 
        table.remove();        
    });
});