初めてjquery clone div

Question

ADDボタンをクリックするたびにこのフォームを複製したいというフォームがあります。私の質問は：どのように私は最初にフォームにnoneを設定することができますか？ Addボタンをクリックして表示ブロックを設定し、次回はdivを複製するだけですか？

$(document).ready(function(){ 
 
    $(".Add").click(function(){ 
 
\t $(".formi").eq(0).clone().insertAfter(".formi:last"); 
 
\t $(".cancel").click(function() { 
 
    $(this).parents('.formi').remove(); 
 
     }); 
 
    }); 
 
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="Add">Add+</span> 
 
<div class="all"> 
 
    <form class="formi"> 
 
     <input type="text" placeholder="name" /> 
 
     <select name="cars"> 
 
      <option value="">one</option> 
 
      <option value="">two</option> 
 
     </select> 
 
     <button type="submit">ok</button> 
 
     <span class="cancel">Cancel</span> 
 
    </form> 
 
</div>

おかげ

Answer 1

にそれを削除。要素の挿入中に.show()を使用してください。

要素を動的に生成する場合は、.on()メソッドを実装してEvent Delegationアプローチを実装する方法もお勧めします。

$(document).ready(function() { 
 
    $(".Add").click(function() { 
 
    $(".formi").eq(0).clone().show().insertAfter(".formi:last"); 
 
    
 
    }); 
 
    $('.all').on('click', ".cancel", function() { 
 
     $(this).closest('.formi').remove(); 
 
    }); 
 
});

.formi { 
 
    border: 1px solid #000; 
 
    width: 50%; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="Add">Add+</span> 
 
<div class="all"> 
 
    <form class="formi"> 
 
    <input type="text" placeholder="name" /> 
 
    <select name="cars"> 
 
     <option value="">one</option> 
 
     <option value="">two</option> 
 
    </select> 
 
    <button type="submit">ok</button> 
 
    <span class="cancel">Cancel</span> 
 
    </form> 
 
</div>

Answer 2

私はあなたが前にこのような何かを行うことができると思い、あなたのあなたは再びそれを表示したいとき（あなたがdisplay="theOneyouWant"を変更後、document.getElementsByClassName("youClass").style.display="none";

「を追加しますクリックして」私がクリックすると推測する）

Answer 3

$(document).ready(function() { 
 
    $(".Add").click(function() { 
 
    $(".hide").removeClass("hide");//remove the class hiding the form 
 
    $(".formi").eq(0).clone().insertAfter(".formi:last"); 
 
    $(".cancel").click(function() { 
 
     $(this).parents('.formi').remove(); 
 
    }); 
 
    }); 
 
});

.formi { 
 
    border: 1px solid #000; 
 
    width: 50%; 
 
} 
 
.hide { 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="Add">Add+</span> 
 
<div class="all"> 
 
    <form class="formi hide"> 
 
    <input type="text" placeholder="name" /> 
 
    <select name="cars"> 
 
     <option value="">one</option> 
 
     <option value="">two</option> 
 
    </select> 
 
    <button type="submit">ok</button> 
 
    <span class="cancel">Cancel</span> 
 
    </form> 
 
</div>

クラスの皮を追加して、あなたはすなわちdisplay:none; CSSルールを開始することができますクリック

Answer 4

要素

$(document).ready(function() { 
 
    $(".formi").hide(); //hide it at page ready you can use css for this 
 
    $(".Add").click(function() { 
 

 
    $(".formi").eq(0).clone().insertAfter(".formi:last").show(); //show it after you appended it 
 

 
    }); 
 
    $('.all').on('click', ".cancel", function() { 
 
    $(this).parents('.formi').remove(); 
 
    }); 
 
});

.formi { 
 
    border: 1px solid #000; 
 
    width: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="Add">Add+</span> 
 
<div class="all"> 
 
    <form class="formi"> 
 
    <input type="text" placeholder="name" /> 
 
    <select name="cars"> 
 
     <option value="">one</option> 
 
     <option value="">two</option> 
 
    </select> 
 
    <button type="submit">ok</button> 
 
    <span class="cancel">Cancel</span> 
 
    </form> 
 
</div>

委任は、あなたのクリックイベントをキャンセルし、クリック時に最初のイベント

Answer 5

からそれをアンラップ非表示を表示しようとすると表示/非表示アクティブなクラスを追加し、通常の形式で表示しない

form { 
    display: none; 
} 
form.active { 
    display: block; 
}