Question

单击“添加”按钮应添加两个文本框，单击“取消”按钮应删除那些添加的文本框。

我已经尝试过adding and removing dynamic textboxes，但这对我没有用。
我点击了“添加”按钮，但没有响应

var counter = 0;
$("#addtextbox").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--;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input class="btn btn-info" type="button" id="addtextbox" value="Add">
</div>

当我单击添加按钮时，应连续添加两个文本框，而当我单击取消按钮时，应删除这两个框。我对此没有明确的想法。有人可以帮我

Answer 1

所以现在它有点响应-如果有空间，它们将紧挨着另一个，如果没有，它们将一个接一个地保留，并且DIV现在也用作父元素，因此所有内容都被删除了DIV，TA现在被命名为... A / B。顺便说一句，您可以在投票按钮下接受答案，也可以根据需要投票；-）

var counter = 0;
function addtextbox() {
  if (counter > 10) {
    alert("Only 10 learning Tools allowed per page.");
    return false;
  }
  var newTextBoxDiv = document.createElement('div');
  newTextBoxDiv.id = 'Tools' + counter;
  document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);
  newTextBoxDiv.innerHTML = "<label></label>" +
    "<textarea id='tbTools" + counter + "A' name='txtTools' rows='3' cols='50'></textarea>" +
    "<textarea id='tbTools" + counter + "B' name='txtTools' rows='3' cols='50'></textarea>" +
    '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
  counter++;
};

function removeTextArea(inputElement) {
  var el = inputElement;
  while (el.tagName != 'DIV') el = el.parentElement;
  el.parentElement.removeChild(el);
  counter--;
}

textarea {
   display:inline
}

<div>
  <input class="btn btn-info" onclick="addtextbox()" type="button" value="Add">
</div>
<div id="ToolsGroup">
</div>

单击添加按钮应添加两个文本框，单击取消按钮应删除该文本框

1 个答案: