4

请考虑以下代码段：

<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”方法。

4

3 回答 3

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

顺便说一句，我已经删除了onclickHTML 中的属性

演示

于 2012-08-02T22:13:51.360 回答
3

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

$(".deleteRow").on("click",function() { 
   $(this).closest(".row").remove()
});
于 2012-08-02T22:15:00.810 回答
-1

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()       
}
于 2014-02-26T12:33:32.337 回答