Удалить кнопку удаления для первого div?

Question

У меня есть div, который в настоящее время клонированного

<div id="duplicater"> 
    <label>Number:</label> 
    <input type="number" class="quantity" id="quantity"/> 
    <button id="removebutton" class='remove'>Delete</button> 
</div> 

Первый раз загрузится страница будет показывать первый DIV. Если вы нажмете кнопку «Добавить», она будет клонировать весь div.

Но у него есть кнопка удаления, которая отображается для всех клонированных div. I не хочу показать, что кнопка удаления для первого основного 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'); 
 
    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

Go с ниже ссылка может быть, это может помочь вам

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 КОД

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

попытка ниже CSS:

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

это CSS не отображать кнопку Удалить первого элемента duplicater Див.

Надеюсь, это поможет вам.

Answer 3

Использование ниже кода

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 4

Вы можете скрыть это с помощью CSS.

#duplicater #removebutton { 
    display: none; 
} 

Answer 5

Я чувствую себя более Comfor таблицу, основанную на javascript, чтобы сделать это в сравнении с CSS. Это только мое мнение. Если вам действительно не нужно назначать IDs для некоторых других целей, я бы не стал, поскольку в этом случае их не нужно. Вы можете просто использовать функцию $(this).parent().remove() в jQuery. Это удалит элемент без предназначаться какой-нибудь определенный ID и т.д.

Ваш HTML-код будет выглядеть примерно так:

<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(); 

}); 

Очень чистый и конденсированный код.Вот jsbin для использования:

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