Question

我已经找到了关于堆栈溢出的这个问题的一些答案，但它对我不起作用。目前，我的代码看起来像这样（我删除了其他div，因此读起来不会太长）：

<div id="dynamicInput">
   <div id="duplicater">
      <input type="text" placeholder="Event Title" name="title">
      <input type="text" placeholder="url" name="url">
   </div>
</div>

和javascript：

  var i = 0;
  var original = document.getElementById('duplicater');

  function duplicate() {
    var clone = original.cloneNode(true);
    clone.id = "duplicate" + ++i;
    original.parentNode.appendChild(clone);
}

它工作得很好，但是如果我在按下“添加事件”按钮之前放了一些文本，它也会克隆文本，我不希望这样。我试图在第一行添加.find('input').val('')，但它不起作用，我甚至无法克隆。我的控制台中的错误是method find not found。

同样的事情发生在我在论坛上找到的所有解决方案：或者它禁用了按钮，我不能再复制，或者它可以工作但克隆文本。

我该怎么做？

感谢您的帮助!!

Answer 1

您可以遍历div中的元素并单独清除它们。

var i = 0;
  var original = document.getElementById('duplicater');

var onClick = function() {
    var clone = original.cloneNode(true);
    clone.id = "duplicate" + ++i;
    
    for (var i = 0; i < clone.childNodes.length; i++) {
      var e = clone.childNodes[i];
      if (e.tagName) switch (e.tagName.toLowerCase()) {
         case 'input':
            switch (e.type) {
               case "radio":
               case "checkbox": e.checked = false; break;
               case "button":
               case "submit":
               case "image": break;
               default: e.value = ''; break;
            }
            break;
         case 'select': e.selectedIndex = 0; break;
         case 'textarea': e.innerHTML = ''; break;
         default: break;
      }
   }
    original.parentNode.appendChild(clone);
};

$('#button').click(onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="dynamicInput">
   <div id="duplicater">
      <input type="text" placeholder="Event Title" name="title">
      <input type="text" placeholder="url" name="url">
   </div>
</div>
<input type="button" id="button" value="Clone" />

如何在克隆div之前删除输入？

1 个答案: