<div id="duplicater">
<label>Number:</label>
<input type="number" class="quantity" id="quantity"/>
<button id="removebutton" class='remove'>Delete</button>
</div>
初めてページが読み込まれるが、それが最初のdivが表示されますクローニングされているdiv
を持っています。 「追加」ボタンをクリックすると、div
全体がクローンされます。
ただし、削除ボタンがあり、クローン化されたすべてのファイルが表示されますdiv
I は、最初のメインdiv
の削除ボタンを表示します。
どうすればよいですか? CSS以下
jQuery(document).ready(function() {
var id = 0;
jQuery('#add').click(function() {
var button = jQuery('#duplicater').clone();
id++;
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id', 'new_' + id).attr('data-id', id);
button.find('.remove').attr('data-id', id);
});
jQuery(document).on('click', '.remove', function(e) {
var thisId = jQuery(this).data('id');
jQuery('div[data-id="' + thisId + '"]').remove();
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">add</button>
<div id="duplicater">
<label>Number:</label>
<input type="number" class="quantity" id="quantity" />
<button id="removebutton" class='remove'>Delete</button>
</div>
<div id="new_item_details" class="new_item_details">
</div>
理由だけではなく、CSSルール '#duplicater .remove {ディスプレイとして使用していない、あなたのjqueryので – vamsi
それを追加し、削除ボタンを複製してはいけない:なし。 } ' –
と別のオプション(CSSが気に入らない場合) - ' style = 'display:none;' 'をボタンに追加してから、クローンコードのdisplay:blockに設定します。 –