jquery - 添加和删​​除动态文本框

Question

我有以下代码向我的页面添加文本区域。它还附加了一个“删除”按钮，以便用户可以删除文本区域。问题是，当用户单击删除按钮和文本区域中的任何位置时，文本区域被删除......我不确定为什么会发生这种情况。

有人可以快速查看我的代码吗？也许我错过了一些东西。

谢谢！

$("#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++;
    });

Answer 1

使用此代码：

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

您将单击功能应用于按钮、标签和整个 TextArea。

一种解决方法是创建一个单独的函数并在代码中的按钮上使用 onClick。

像这样的东西：

newTextBoxDiv.after().html(
      "<label></label>" +
      "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'>    </textarea>" +

      '&nbsp;&nbsp;<input type="button" value="Remove" onClick="functionName(param)" class="removeTools">');

然后有一个单独的功能：

function functionName(param) {
  //code
}

Answer 2

您可以使用此代码

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

Answer 3

您的代码中的问题是您将点击事件添加到您添加的全新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--;
}