• 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();
        });
  • 相关阅读:
    b_lc_数组的最大公因数排序(并查集+质因数分解优化)
    Coggle 30 Days of ML:结构化赛题:天池二手车交易价格预测(二)
    Coggle 30 Days of ML:结构化赛题:天池二手车交易价格预测(一)
    漫谈
    漫谈
    漫谈
    漫谈
    漫谈
    漫谈
    漫谈
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/14223303.html
Copyright © 2020-2023  润新知