问个 Jquery 的选择元素的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2628 天前的主题，其中的信息可能已经有所发展或是发生改变。

<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

2017-10-10 09:59:43 +08:00

使用 class 选择器 ,或者直接用属性选择器

cnqncom

2017-10-10 10:07:09 +08:00

@zgbgx1 它们的 class 都是相同的。
现在我在每行前面都用一个 P 元素包括起来了，怎么选择当前行？

IdJoel

2017-10-10 10:09:22 +08:00

@cnqncom

$(this).parent('p')

Liang

2017-10-10 10:11:40 +08:00

没看懂需求，最好把你原结构和你想要的效果贴出来，无畏的代码最好删除，例如 style

uloveits

2017-10-10 10:12:27 +08:00

@cnqncom 每个部分用一个都用一个 div 包裹起来然后 $(".btn").click(function(){
$(this).parent()
})

xiaome

2017-10-10 10:13:32 +08:00

如果不包括按钮就是 $("input:text:gt(1)")，包括按钮就是 $("input:gt(2)")
ipput 选取所有 input 元素
:text 筛选 type 是 text 的元素
:gt(2) 索引大于 2 的元素

都是很基础的内容，建议多看看文档吧，给个比较直观的手册，希望可以帮到你。
http://jquery.cuishifeng.cn/

cnqncom

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

2017-10-10 11:01:37 +08:00

有一个 prev('selector') 的方法

chztv

2017-10-10 11:12:57 +08:00

Jquery 的选择器感觉无敌的啊，没有 id 或者 class 都可以用父级层次来选择，肯定能实现。

dd0754

2017-10-10 11:32:00 +08:00

```
<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>
```