要求只有最后一行的时候去掉取消并移除按钮
<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();
});