2017-09-13 14 views
0

スタックオーバーフローに関するこの質問に対するいくつかの回答が見つかりましたが、それは私のためには機能しません。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:現時点では は、私のコードは、この(それが長すぎて読めないですので、私は他のdivを削除)のように見えます

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です。

フォーラムで見つけたすべてのソリューションで同じことが起こります。ボタンを無効にしてもう複製できない、または動作しますが、テキストを複製します。

どうすればいいですか?

ありがとうございます!

+0

生のテンプレートを使用することを検討してください。 –

+0

イベントを発生させるボタンがありますか?他のHTMLを投稿することができれば、それがわかりやすく理解できるようになります。 – kauffee000

+0

はいこれはボタンです Jessicascn

答えて

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" />

関連する問題