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框架，用于定位和样式化。

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

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

据我所知，最简单的选择是使用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>

我为格式化道歉。

基本上按钮必须做什么：检测并选择它的第四个父'row'，所以我可以应用`.remove'方法。

Answer 1

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

我已删除HTML中的onclick属性

DEMO

Answer 2

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

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

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()       
}

jquery由父div删除

3 个答案: