jquery删除表行

Question

我有一张桌子

<table id="favoriteFoodTable">
    <th>
        Food Name:
    </th>
    <th>
        Restaurant Name:
    </th>
    <th>

    </th>
    <?php while ($row = $foods->fetch()) {
        ?>
        <tr>
            <td>
                <?php echo $row['foodName']; ?>
            </td>
            <td>
                <?php echo $row['restaurantName']; ?>
            </td>
            <td>
                <a class="deleteLink" href="" >delete</a>
            </td>
        </tr>
    <?php } ?>
</table>

我使用这个jquery函数,所以当用户点击删除时,行的背景将会改变,然后行将被删除

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        var td = $(this).parent();
        var tr = td.parent();
        //change the background color to red before removing
        tr.css("background-color","#FF3700");

        tr.fadeOut(400, function(){
            tr.remove();
        });
    });
});

只是背景正在改变,但行没有删除,为什么？怎么解决？

Answer 1

该行已删除,但由于点击使您按照链接进行操作,因此在刷新页面时会立即恢复该行.

添加return false;或event.preventDefault();在回调结束时以防止默认行为:

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        var tr = $(this).closest('tr');
        tr.css("background-color","#FF3700");
        tr.fadeOut(400, function(){
            tr.remove();
        });
        return false;
    });
});

示范

请注意,我使用closest了更可靠的代码:如果介于两者之间,tr则仍会找到它.