jq 时间的代理和父级的删除

要求只有最后一行的时候去掉取消并移除按钮

<table>
        <tbody id="tbody">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>
                    <span><font class="cancel">取消并移除</font></span>
                </td>
            </tr>
            <tr>
                <td>11</td>
                <td>2</td>
                <td>3</td>  
                <td>4</td>
                <td>
                    <span><font  class="cancel">取消并移除</font></span>
                </td>
            </tr>
            <tr class="ii">
                <td>111</td>
                <td>2</td>
                <td>3</td>  
                <td>4</td>
                <td>
                    <span><font  class="cancel">取消并移除</font></span>
                </td>
            </tr>
        </tbody>
    </table>

jq

$(function(){
        change();
        $("#tbody").each((index,ele)=>{
           $(ele).find('font').addClass("ss"); //找到元素循环添加一个类名   
        })   
    })
    function change(){
        var tb =   $("tbody").children();
        // console.log(tb.children().last().find('font').hasClass("cancel")); 
        //1.判断拥有cancel类名的元素的个数如果只有有一个就删除
        // if(tb.length==1&&$('.cancel').length==1){
        //     $(".cancel").remove();
        // }
        //2.判断元素的最后一个是否有这个类有就移除取消并删除按钮
        if(tb.length==1&&tb.find('font').hasClass("cancel")){
            $(".cancel").remove();
        }
    }
    // 方法1 给每个元素一个类名
    // $(".cancel").on("click",function(){
    //     // console.log($(this).parent()); 
    //     $(this).parent().parent().parent().remove();
    //     //$(this).parents("tr").remove();//查找到父辈级别的元素是tr的并删除
    //     change();
    // })


    //方法2  事件代理 新添加的元素也有事件
    $("#tbody").on("click","font",function(e){//事件的代理,font上的事件让tbody代理执行  
        // console.log(this==e.target);//true 返回的是绑定的事件元素原生的  
        //$(this)就是触发的事件元素 是jq类型可以调用jq里面的方法
        $(this).parents("tr").remove();//查找到父辈级别的元素是tr的并删除
        change();
    });