美文网首页程序员
关于JQ里prev()的简单操作

关于JQ里prev()的简单操作

作者: Cherry9507 | 来源:发表于2017-10-27 11:00 被阅读0次

    一个朋友提了个需求给我,如下:

    点击按钮删除input,如果input剩一个,点击按钮全部消失。
    

    很简单的操作,但是你如果不知道jquery里有prev()这个方法,可能你会走很多弯路。
    代码:

    html
    <div>
            <input type="text" placeholder="用户名">
            <input type="text" placeholder="用户名">
            <input type="text" type="hidden">
            <input type="text" type="hidden">
            <a class="reduce" onclick="less()">—</a>
        </div>
    
    css
           .reduce{
                display: inline-block;
                color: white;
                text-align: center;
                width: 30px;
                height: 30px;
                background: red;
                line-height: 30px;
                cursor: pointer;
            }
            input{
                height: 18px;
                padding: 5px 10px;
            }
    
    JS
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        var Reduce = document.getElementsByClassName("reduce");
        var Inp = document.getElementsByTagName("input");
        function less(){
                  //查找元素的上一个元素 并移除
            $(".reduce").prev().remove();
            if(Inp.length < 1){
                $(".reduce").remove()
            }
        }
        $(".reduce")
    </script>
    

    这里我混合写的,不规范,只做一个栗子,重在理解。

    相关文章

      网友评论

        本文标题:关于JQ里prev()的简单操作

        本文链接:https://www.haomeiwen.com/subject/ywdrpxtx.html