通过父级div删除jQuery

Question

请考虑以下代码片段：

```html

请考虑以下代码片段：

```

<div class="row">
    <div class="span12">
        <div class="control-group">
            <label class="control-label">Person Name</label>
            <div class="controls">
                <input type="text" class="input-medium">
            </div>
        </div>
    </div>
</div>

这些类属于基于网格的CSS框架，名为“Bootstrap”，用于定位和样式设置。

“row”位于单个表单内。该表单提供了多人输入的选项。每个“row”对应于一个具有其输入详细信息的人（在此示例中仅使用一个属性“Person Name”以简化问题）。因此，我可以在单个表单中拥有许多代码片段/“rows”。

我想做的是创建一个按钮，该按钮将位于每个“row”内，并且每当单击它时，它将删除其中所在的整个行，但不会影响属于其他人的输入详细信息的其他行。

据我所了解，最简单的选项是使用jQuery ' .remove'方法。但是，在这种情况下，它需要枚举每个“row”的id，这是我可以在服务器端生成的，但在这种情况下不允许-我没有“id”属性，也无法添加它们，因此我不能指定要删除的行id。如果我将类作为参数传递给“remove”方法，那么该按钮显然会删除所有行。

只是为了说明情况。多个行，请注意按钮。

<form>
    <div class="row">
        <div class="span12">
            <div class="control-group">
                <label class="control-label">Person Name</label>
                <div class="controls">
                    <input type="text" class="input-medium">
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button type="button" onclick="deleteTheEntireRow()" class="btn btn primary">Delete Person</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="span12">
                <div class="control-group">
                    <label class="control-label">Person Name</label>
                    <div class="controls">
                        <input type="text" class="input-medium">
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <button type="button" onclick="deleteTheEntireRow()" class="btn btn primary">Delete Person</button>
                        </div>
                    </div>
                </div>
            </div>
</form>

对于格式问题我很抱歉。

按钮需要做的事情：

检测并选择它的第四个父级'row'，这样我就可以应用`.remove`方法。

- Aubergine

---

我已经清理了你的格式。请注意，具有类名为“row”的两个div没有结束标记。 - Radu

从来没有真正理解这里过于复杂的代码格式。实际上很简单。只需在文本编辑器中使用空格缩进代码，然后将其复制/粘贴到SO中，选择代码并按工具栏按钮{}即可。 - elclanrs

@RicardoLohmann 我尝试使用.remove方法，根据我目前的知识水平来工作。由于我来自Java的角度，我发现使用JS和jQuery很困难，这就是我提出问题的原因。该脚本需要足够的知识，因为它将与相关元素一起工作。基本示例对我学习很有帮助。认真地... :-\ - Aubergine

@elclanrs，从Eclipse复制不行吗？ - Aubergine

只要你把制表符转换为空格，就没问题了... - elclanrs

Answer 1

$("button").on("click", function(e) {
    $(this).closest("div.row").remove();
    e.preventDefault();
});​

顺便说一下，我已经从HTML中移除了onclick属性

演示

- kei

---

我相信这正是所需的。我会尝试一下，看看它是否适用于我的情况，然后接受。谢谢！（已点赞） - Aubergine

Answer 2

给每个按钮添加一些类，例如deleteRow，然后使用：

$(".deleteRow").on("click",function() { 
   $(this).closest(".row").remove()
});

- m3div0

---

你的代码在我的项目上运行良好，但为什么第一次需要双击才能删除行？有什么办法可以在第一次单击时完成操作吗？顺便说一下，我是在 <a></a> 上进行操作。 - Sumon Bappi

这个问题已经2年了，我不是很记得具体情况了。如果你能发布含有你代码的jsFiddle，那会非常有帮助，这样我就可以看一下。 - m3div0

Answer 3

HTML

<table>
    <tr>
        <td>information</td>
        <td>
            <button onclick="removeRow(this)">Text</button>
        </td>
    </tr>
    <tr>
        <td>blah</td>
        <td>
            <button onclick="removeRow(this)">Text</button>
        </td>
    </tr>
</table>

JavaScript

removeRow = function(el) {
    $(el).parents("tr").remove()       
}

- dev4092