Question

假设我有一张这样的表：

<table>
    <tbody>
        <tr id="item01">
            <td><img id="image01" onclick="removeItem()" /></td>
        </tr>
        <tr id="item02">
            <td><img id="image02" onclick="removeItem()" /></td>
        </tr>
    </tbody>
</table>

点击其中一个图片（无按钮）removeItem()时，应删除放置图像的整个<tr>。

有没有一种简单的javascript或jQuery方法可以做到这一点？

Answer 1

您可以使用.closest()获取父元素，标记中的this返回当前单击的元素。

试试这个

<强>的jQuery

function removeItem(elem){
    $(elem).closest('tr').remove();
}

标记

<table>
    <tbody>
        <tr id="item01">
            <td><img id="image01" src="test.png" onclick="removeItem(this)" />TES</td>
        </tr>
        <tr id="item02">
            <td><img id="image02" src="test.png" onclick="removeItem(this)" />test</td>
        </tr>
    </tbody>
</table>

Demo

Answer 2

是的，很简单：http://jsfiddle.net/maximgladkov/abMw3/

function removeItem(self) {
     $(self).parents('tr:first').remove();
}

Javascript如何删除相应的tablerow元素？

2 个答案: