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();        
    });
});

父（）的jQuery问题.remove（）

2 个答案: