最初のdivの削除ボタンを削除しますか？

Question

は私が

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

codepen for this

Answer 1

リンクの下で行く、それはあなたを助けることができる

JSFiddle

HTMLコード

<button id="add">add</button> 
<div id="duplicater"> 
    <label>Number:</label> 
    <input type="number" class="quantity" id="quantity" /> 
</div> 
<div id="new_item_details" class="new_item_details"> 
</div> 

JAVASCRIPT CODE

かもしれ

$(document).ready(function() { 
    var id = 0; 
    $('#add').click(function() { 
    var button = $('#duplicater').clone(); 
    id++; 
    button.removeAttr('id'); 
    button.insertBefore('.new_item_details'); 
    button.attr('id', 'new_' + id).attr('data-id', id); 
    button.append("<button id='removebutton' class='remove'>Delete</button>"); 
    button.find('.remove').attr('data-id', id); 
    }); 
    $(document).on('click', '.remove', function(e) { 
    var thisId = $(this).data('id'); 
    $('div[data-id="' + thisId + '"]').remove(); 
    e.preventDefault(); 
    }); 

}); 

Answer 2

試してみてください。

#duplicater:first-of-type .remove{display:none} 

このCSS最初duplicaterのdiv要素の削除ボタンが表示されません。

私はこれがあなたに役立つことを願っています。コード

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').append('<button id="removebutton" class="remove">Delete</button>'); 
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(); 
}); 


}); 



<button id="add">add</button> 
<div id="duplicater"> 
<label>Number:</label> 
<input type="number" class="quantity" id="quantity"/> 

</div> 
<div id="new_item_details" class ="new_item_details"> 
</div> 

Answer 3

使用すると、あなたは、この使用してCSSを非表示にすることができます。

#duplicater #removebutton { 
    display: none; 
} 

Answer 4

以下

Answer 5

私はより多くのCOMFORを感じるだろうCSSだけでなく、これを行うためにjavascriptに依存するテーブル。それは私の意見です。他の用途で実際にIDsを割り当てる必要がある場合を除き、この場合は必要ないので、私はしません。 jQueryで$(this).parent().remove()関数を使用できます。

<div style="margin-bottom:15px"> 
    <button id="add">add</button> 
    </div> 

    <div id="duplicater"> 
    <label>Number:</label> 
    <input type="number" class="quantity" id="quantity"/> 
    </div> 

    <div id="new_item_details" class="new_item_details"> 
    </div> 

そして、あなたのjavascriptのコードは次のようなものになります：

$("#add").click(function() { 

    var c = $("#duplicater").clone(); 
    c.append("<button id='removebutton' class='remove'>Delete</button>"); 
    c.insertBefore("#new_item_details"); 

}); 


$(document).on("click", ".remove", function() { 

    $(this).parent().remove(); 

}); 

をそれはあなたのHTMLコードは次のようになります

など、任意の特定の IDをターゲットにすることなく、要素を削除します

非常にきれいで凝縮したコード。ここでは、使用するためのjsbinです：

http://jsbin.com/pivefasebi/edit?html,js,output