0

入力を動的に追加するフォームがあります。新しい入力を追加すると、グローバルid変数をインクリメントし、それを入力の ID に連結して、一意になるようにします。また、入力ごとに削除ボタンを作成し、その入力と自分自身を削除する必要があります (コンテナーを削除することによって<div>)。JQuery を介して削除ボタンのクリック イベントに匿名関数を追加することで、削除プロセスを実行します。

$('#deletebutton' + id).click(function(){
    $('#inputcontainer' + id).remove();
});

このソリューションの唯一の問題は、私が例外として機能しないことです。いずれかの削除ボタンをクリックすると、最後の入力コンテナーが削除されます。クリックすると、匿名関数が実行され、idその時点で変数が評価されるため、選択した ID が最後の入力の ID になります。したがって、常に最後の入力コンテナが削除されます。

この関数を書き直す方法があるので、クリックイベントに追加すると、 が評価され、注入され、選択が、 などidのよう#inputcontainer1に記述されているかのように処理されます。#inputcontainer2

関数の本体をボタンのonclick()イベントに追加することで、これを行うことができます。

var newbutton = '<button id="deletebutton' + id + '" type="button" onclick="javascript:$(\'#inputcontainer' + id + '\').remove();">x</button>';

しかし、JQuery の方法でこれを行う方法はありclick()ますか?

4

3 に答える 3

2

特定の質問に答えるには、DOM から ID を掘り出す必要があります。

$('#deletebutton' + id).click(function(){
    var id = $(this).attr("id").replace('deletebutton','');
    $('#inputcontainer' + id).remove();
});

削除ボタンを作成するときにデータとして保存することもできます。

<button data-id="1" id="deletebutton1">

$('#deletebutton' + id).click(function(){
    var id = $(this).data("id");
    $('#inputcontainer' + id).remove();
});

どちらの場合も、idは整数ではなく文字列であることに注意してください。

于 2013-08-23T11:13:41.690 に答える
1

いずれかの削除ボタンをクリックすると、最後の入力コンテナが削除されます[...]

最初のスニペットがループ内にある場合、idおそらく各反復にスコープされていません。そのため、イベントの 1 つclick()がトリガーされて を使用しようとするまでに.remove()、idループ中に指定された最後の値に既に設定されています。

IIFEを使用して、反復ごとfunctionに異なる値を保持するための追加のスコープを作成できidます (参照:クロージャ)。

/* loop */ {
    var id = ...;

    (function (id) {
        $('#deletebutton' + id).click(function(){
            $('#inputcontainer' + id).remove();
        });
    })(id);
}

ただし、将来の参考のために、ECMAScript 6 はブロック スコープを追加しており、次のことを可能にする必要があります。

/* loop */ {
    let id = ...;

    $('#deletebutton' + id).click(function(){
        $('#inputcontainer' + id).remove();
    });
}
于 2013-08-23T11:12:50.643 に答える
0 
$('#deletebutton' + id).click(function(){
    $(this).parent().remove();
});

コンテナーが直接の親ではなく、実行できるクラスがない場合:

$('#deletebutton' + id).click(function(){
    var idNum = $(this).attr("id").replace('deletebutton','');
    $("#inputcontainer"+idNum).remove();
});

適切なクラスがある (または追加できる) 場合は、次の方法が最適です。

$(document).on("click",".deleteButton",function() {
    $(this).parents(".inputContainer").remove();
});
于 2013-08-23T11:10:07.407 に答える