时间戳

首页 > 解决方案 > 单击添加按钮应添加两个文本框，取消按钮应删除文本框

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

问题描述

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

我尝试添加和删除动态文本框，但这对我不起作用。
我点击了“添加”按钮，没有任何反应 

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>

当我单击添加按钮时，它应该连续添加两个文本框，当我单击取消按钮时，它应该删除这两个框。我对这样做没有任何明确的想法。所以有人可以帮助我

标签： javascripthtml

解决方案

所以现在它有点响应 - 如果有空间，它们将紧挨着另一个，如果没有，它们将保持在另一个之下，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>

推荐阅读