问个 Jquery 的选择元素的问题

This topic created in 3149 days ago, the information mentioned may be changed or developed.

<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 replies • 2017-10-10 11:32:00 +08:00

zgbgx1

Oct 10, 2017

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

cnqncom

Oct 10, 2017

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

IdJoel

Oct 10, 2017

@cnqncom

$(this).parent('p')

Liang

Oct 10, 2017

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

uloveits

Oct 10, 2017

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

xiaome

Oct 10, 2017

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

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

cnqncom

Oct 10, 2017

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

Oct 10, 2017

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

chztv

Oct 10, 2017

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

0754

Oct 10, 2017

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