jquery通过父div删除

Question

请考虑以下代码片段:

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

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

“行”位于单个表单内。该表格为许多人提供了输入。每个“行”对应一个人及其输入详细信息。 (在这个例子中，为了简单起见，我只有一个属性 - '人名')所以我可以在一个表单中拥有许多像这样的片段/'行'。

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

据我所知，最简单的选择是使用 jQuery'.remove' 方法。然而，在这种情况下，它需要每个“行”的 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>

对于格式问题，我深表歉意。

基本上按钮必须执行的操作: 检测并仅选择其第四个父“行”，因此我可以应用“.remove”方法。

Answer 1

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

我顺便删除了 HTML 中的 onclick 属性

DEMO