V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cnqncom
V2EX  ›  jQuery

问个 Jquery 的选择元素的问题

  •  
  •   cnqncom · 2017-10-10 09:52:09 +08:00 · 4908 次点击
    这是一个创建于 2361 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <input type="text" name="filter_content_tag[]" style="margin:5px;width:45%;float:left;" class="form-control" value="" placeholder="关键词"><input type="text" name="filter_content_tag[]" style="margin:5px;width:45%;float:left;" class="form-control" value="" placeholder="替换为">
    <input type="button" class="btn btn-danger btn-xs" value="删除" style="margin-top:10px;float:right;" onclick="DelRowInput(0)">
    
    <input type="text" name="filter_content_tag[]" style="margin:5px;width:45%;float:left;" class="form-control" value="" placeholder="关键词"><input type="text" name="filter_content_tag[]" style="margin:5px;width:45%;float:left;" class="form-control" value="" placeholder="替换为">
    <input type="button" class="btn btn-danger btn-xs" value="删除" style="margin-top:10px;float:right;" onclick="DelRowInput(0)">
    

    点下面一行的“删除”按钮,删除下面一行表单。问题是这些表单没有用 DIV 包括命名,所以有啥办法?

    10 条回复    2017-10-10 11:32:00 +08:00
    zgbgx1
        1
    zgbgx1  
       2017-10-10 09:59:43 +08:00
    使用 class 选择器 ,或者直接用属性 选择器
    cnqncom
        2
    cnqncom  
    OP
       2017-10-10 10:07:09 +08:00
    @zgbgx1 它们的 class 都是相同的。
    现在我在每行前面都用一个 P 元素包括起来了,怎么选择当前行?
    IdJoel
        3
    IdJoel  
       2017-10-10 10:09:22 +08:00
    @cnqncom

    $(this).parent('p')
    Liang
        4
    Liang  
       2017-10-10 10:11:40 +08:00
    没看懂需求,最好把你原结构和你想要的效果贴出来,无畏的代码最好删除,例如 style
    uloveits
        5
    uloveits  
       2017-10-10 10:12:27 +08:00
    @cnqncom 每个部分用一个都用一个 div 包裹起来 然后 $(".btn").click(function(){
    $(this).parent()
    })
    xiaome
        6
    xiaome  
       2017-10-10 10:13:32 +08:00   ❤️ 1
    如果不包括按钮就是 $("input:text:gt(1)"),包括按钮就是 $("input:gt(2)")
    ipput 选取所有 input 元素
    :text 筛选 type 是 text 的元素
    :gt(2) 索引大于 2 的元素

    都是很基础的内容,建议多看看文档吧,给个比较直观的手册,希望可以帮到你。
    http://jquery.cuishifeng.cn/
    cnqncom
        7
    cnqncom  
    OP
       2017-10-10 10:54:14 +08:00
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>hangge.comm</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <style>
            #container{
                width:380px;
                margin:20px auto;
                padding:15px;
                background-color:#eee;
              border-radius: 15px;
            }
            /** 新增按钮 **/
            #addVar{
                margin:0 0 0 52px;
                padding:5px;
                display:inline-block;
                background-color:#3A9668;
                color:#f1f1f1;
                border:1px solid #005;
                border-radius: 4px;
            }
            /** 删除按钮 **/
            .removeVar{
                margin:auto;
                padding:5px;
                display:inline-block;
                background-color:#B02109;
                color:#f1f1f1;
                border:1px solid #005;
              border-radius: 4px;
            }
     
            #addVar:hover, .removeVar:hover{
                cursor: pointer;
            }
     
            .alignRight{
                text-align: right;
            }
     
            input, textarea{
                padding:5px;
                font-size: 16px;
            }
        </style>
        <script>

    function removeVar(){
    $(this).parent().remove();
    }
        </script>
    </head>
    <body>
        <div id="container">
          <form id="myForm" method="post">
            <p>
              <label for="var1">项目 1: </label>
              <input type="text" name="var1" id="var1">
             <input type="button" value="删除" style="margin-top:10px;float:right;" onclick="removeVar()">
            </p>
            <p>
              <label for="var2">项目 2: </label>
              <input type="text" name="var2" id="var2">
              <input type="button" value="删除" style="margin-top:10px;float:right;" onclick="removeVar()">
            </p>
            <p class="alignRight"><input type="submit" value="提交"></p>
          </form>
        </div>
    </body>
    </html>






    为啥函数 removeVar 无法删除前面的东西?
    justfindu
        8
    justfindu  
       2017-10-10 11:01:37 +08:00
    有一个 prev('selector') 的方法
    chztv
        9
    chztv  
       2017-10-10 11:12:57 +08:00
    Jquery 的选择器感觉无敌的啊,没有 id 或者 class 都可以用父级层次来选择,肯定能实现。
    dd0754
        10
    dd0754  
       2017-10-10 11:32:00 +08:00   ❤️ 1
    ```
    <div id="container">
    <form id="myForm" method="post">
    <p>
    <label for="var1">项目 1: </label>
    <input type="text" name="var1" id="var1">
    <input type="button" value="删除" style="margin-top:10px;float:right;" class="del">
    </p>
    <p>
    <label for="var2">项目 2: </label>
    <input type="text" name="var2" id="var2">
    <input type="button" value="删除" style="margin-top:10px;float:right;" class="del">
    </p>
    <p class="alignRight">
    <input type="submit" value="提交">
    </p>
    </form>
    </div>
    <script>
    $('.del').click(function() {
    var _this = $(this),
    parent = _this.parent();
    parent.remove();

    });
    </script>
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3135 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 14:29 · PVG 22:29 · LAX 07:29 · JFK 10:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.