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フレームワークに属し、配置とスタイル設定に使用されます。

「行」は単一のフォームの内側にあります。フォームは多くの人に入力を提供します。各「行」は、入力の詳細を持つ1人の人物に対応します。（この例では、簡単にするために1つのプロパティ（「個人名」）しかありません）したがって、このような多くのスニペット/「行」を1つのフォームに含めることができます。

私がやりたいのは、すべての「行」の内側にあるボタンを作成することです。ボタンをクリックすると、それが存在する行全体が削除されますが、他の人の入力詳細に属する他の行には影響しません。

私が理解している限り、最も簡単なオプションはjQueryの「.remove」メソッドの使用です。ただし、この場合はすべての「行」のID列挙が必要になります。これはサーバー側で生成できますが、この場合は許可されていないと仮定します。「id」属性とIはありません。それらを追加できないため、削除する行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>

フォーマットして申し訳ありません。

基本的に、ボタンが実行する必要があること：4番目の親の「行」だけを検出して選択するため、「。remove」メソッドを適用できます。

4

3 に答える 3

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

onclickちなみにHTMLのプロパティを削除しました

デモ

于 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 に答える