Question

我必须在ID为“ add”的div中添加和删除输入字段，因此以下代码无法正常工作。

<div id="add">
</div>

<button id="add-el">Add</button>
<button id="add-el">Remove</button>

$("#add-el").on("click", funtion () {

   var input = $("<input class=\"some-class\" type=\"email\" name=\"email\" 
    required=\"\" placeholder=\"Enter your address\" autocomplete=\"off\">");
   $("#add").append(input);

});

$("#remove-el").on("click", funtion () {

   $("#add").remove(input);

});

Answer 1

使用jQuery(html, attributes)而不是字符串串联来创建元素。

您可以使用^i清除.empty()的内容。或者，在事件处理程序外部定义<div>变量，并使用它删除元素。

input

var input;
$("#add-el").on("click", function() {
  input = $('<input />', {
    "class": "some-class",
    "type": "email",
    "placeholder": "Enter your address"
  });

  $("#add").append(input);
});

$("#remove-el").on("click", function() {
  //$("#add").empty();

  if (input && input.length) {
    input.remove();
  }
});

Answer 2

您的代码中存在多个问题。

您遇到了SyntaxError，因为您在required=\"\"之前有换行，并且您写的是funtion而不是function

var input

$("#add-el").on("click", function() {

  input = $("<input class=\"some-class\" type=\"email\" name=\"email\" required = \"\" placeholder=\"Enter your address\" autocomplete=\"off\">");
  $("#add").append(input);

});

$("#remove-el").on("click", function() {
  input.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add">
</div>

<button id="add-el">Add</button>
<button id="remove-el">Remove</button>

并且ID必须是唯一的，您不必具有ID为add-el的元素。

您将无法访问在input回调中的add-el回调中定义的remove-el。

Answer 3

您的代码中有问题：https://codepen.io/creativedev/pen/pZNOwq

将功能更改为功能，它将起作用。观看演示

$("#add-el").on("click", function () {

   var input = $("<input class=\"some-class\" type=\"email\" name=\"email\" required=\"\" placeholder=\"Enter your address\" autocomplete=\"off\">");
   $("#add").append(input);

});

如何使用jQuery添加和删除具有属性的输入元素

3 个答案: