0

以前の Jquery コードによって挿入された div を削除しようとしています。

$counter = 0;
$("#add").click(function() {
    $counter++;
    $("#ipblock").append('<input type="text" name="inputip" id="inputip'+$counter+'" size="22" /></br>');
});

$("#del").click(function() {
    $("#inputip'+$counter+'").remove();
    $counter = parseFloat(counter) - 1;
});

完全なデモはhttp://jsfiddle.net/felix001/fQBNE/26/にあります。入力に正しいIDがあることをfirebugで確認できます。しかし、jquery と firebug コンソールの両方で削除しようとすると、div (??) が見つかりません。

私を正しい方向に向けることができる人。

ありがとう、

4

1 に答える 1

2

コードにいくつかのエラーがあります。

$counter = 0;
$("#add").click(function() {
    $counter++;

    //I removed the `<br />` tag and added a bit of CSS because if you remove the <input /> tags the <br /> tags added with them remain
    $("#ipblock").append('<input type="text" name="inputip" id="inputip'+$counter+'" size="22" />');
});

$("#del").click(function() {

    //this just makes sure there is actually an element to select before trying to select it
    if ($counter) {

        //use double quotes to start and stop the string here
        $("#inputip"+$counter).remove();

        //make sure to refer to `$counter` and not `counter`
        $counter = $counter - 1;
    }
});​

ここにデモがあります：http://jsfiddle.net/fQBNE/29/

呼び出し<br />でタグが不要になるように、この CSS を追加しました。.append()

/*This will put each input on its own line*/
#ipblock > input {
    display:block;
}​

アップデート

$counter変数を使用せずにこれを行う別の方法は、クリック イベント ハンドラーで最後のinput要素を選択することです。#del

$("#add").click(function() {

    //notice no ID is needed
    $("#ipblock").append('<input type="text" name="inputip" size="22" />');
});

$("#del").click(function() {

    //first try to select the last inputip element
    var $ele = $('#ipblock').children('input[name="inputip"]').last();

    //only proceed if an element has been selected
    if ($ele.length) {

        //and now remove the element
        $ele.remove();
    }
});​

ここにデモがあります：http://jsfiddle.net/fQBNE/31/

于 2012-06-10T18:20:57.003 に答える