jQuery 的父元素选择器小编很少使用，但却看到不少 web开发者们经常使用。
小编个人是不太推荐使用父元素选择器的。因为如果是列表的情况下，在循环时可以将当前的索引绑定给需要点击的按钮，通过 索引 查找元素。
本篇文章在小编不推荐的情况下，还是决定写一篇。
先来一段 HTML 结构代码
<table class="table table-bordered" id="user-table">
<thead>
<tr>
<th>姓名</th>
<th>职业</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>河浪</td>
<td>web前端</td>
<td>
<button class="btn btn-default btn-xs on-delete">删除</button>
</td>
</tr>
<!-- 更多代码省略 -->
</tbody>
</table>效果预览
设需求：点击 “删除”按钮，删除表格中相对应的行
万事具备，该是上代码的时候了。
#1 父元素选择器
- 方法名：parent( selector )
- 功能描述：取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。
- 注意事项：只是进行单级的DOM树查找（也就是只查找一层，直接的父元素）。所以小编感觉这个方法提供一个选择器没什么鸟用啊。
通过上述对 父元素选择器 的描述后，根据需求写出如下代码
$("#user-table").on("click",".on-delete",function () {
$(this).parent().parent().remove();
})parent() 每次只向上查找一层，所以需要查找两次才能匹配到 <tr> 元素
非常 “完美”的实现了需求，小编见过许多开发者都这么写。。。因为他们都不知道还存在另一个更科学的方法
#2 祖先元素选择器
- 方法名：parents( selector )
- 功能描述：获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数。
- 注意事项：返回的元素顺序是从离它最近的父级元素开始的（从里到外的顺序），是所有匹配的父元素，而不是只返回离它最近的匹配的父元素（给所需要匹配的父元素添加唯一的匹配标识）。
下面，使用祖先元素选择器重写上面的功能
$("#user-table").on("click",".on-delete",function () {
$(this).parents("tr").remove();
})因为在当前的HTML结构中，父元素 <tr> 已经是唯一标识，所以未添加 class 或其它可标识的属性
又是一波骚操作，功能顺利完成。小编为什么会说这种方法想较于上一种更加科学呢？
理由有以下几点：
- 代码更加简洁
- 代码健壮性(容错)更好，如果是第一种方式，增加或删除一级布局结构代码都会导致功能出现错误。
正在阅读本篇文章的你，是不是也只用过 parent() 而没用过 parents() 呢？
从现在开始，多多使用 parents() 吧，它会让你的代码更优秀！
在本篇文章中，小编使用了 on() 这个jQuery 中处理事件的王者方法，有兴趣的读者可以阅读小编的原创文章《jQuery 事件处理 on()》，有详细的，科学的使用方式介绍。
文章链接：https://blog.csdn.net/u013350495/article/details/82533066
作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]
微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。
更多精彩文章，请扫下方二维码关注我的公众号
