2

ページにテキスト領域を追加する次のコードがあります。また、ユーザーがテキスト領域を削除できるように、「削除」ボタンを追加します。問題は、ユーザーが削除ボタンをクリックしたときにテキスト領域が削除され、テキスト領域のどこでも削除されることです...なぜこれが起こっているのかわかりません。

誰かが私のコードを簡単に見てもらえますか? 多分私は何かが欠けています。

ありがとう！

$("#btnAddTools").click(function () {
        if(counter>10){
            alert("Only 10 learning Tools allowed per page.");
            return false;
        }   

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter);
        newTextBoxDiv.after().html(
              "<label></label>" +
              "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" +

              '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools">').click(function () {
                   $(this).remove();
                   counter--;
                });
        newTextBoxDiv.appendTo("#ToolsGroup");
        counter++;
    });
4

3 に答える 3

1

このコードを使用できます

var counter=0;
$("#btnAddTools").click(function () {
    if(counter>10){
        alert("Only 10 learning Tools allowed per page.");
        return false;
    }   

    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter);
    newTextBoxDiv.after().html(
          "<label></label>" +
          "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" +

          '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools">');
    newTextBoxDiv.appendTo("#ToolsGroup");
    counter++;
});
$(document).on('click','.removeTools'.function(){
    $(this).prev().remove();
});
于 2013-04-11T14:23:56.027 に答える
1

コードの問題は、追加する新しい html全体にクリック イベントを追加することです。

この新しいコードを確認してください

var counter = 0;
$("#btnAddTools").click(function () {
    if (counter > 10) {
        alert("Only 10 learning Tools allowed per page.");
        return false;
    }

    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter);
    newTextBoxDiv.after().html(
        "<label></label>" +
        "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" +

        '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">');
    newTextBoxDiv.appendTo("#ToolsGroup");
    counter++;
});

function removeTextArea(textAreaElement) {
    $(textAreaElement).parent().remove();
    counter--;
}
于 2013-04-11T14:24:39.623 に答える