问个 Jquery 的选择元素的问题

V2EX = way to explore

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

已注册用户请登录

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

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