Блог

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 файлов. Я не хочу показывать эту кнопку удаления для первого основного 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 для этого

Перейдите по ссылке ниже, может быть, это поможет вам

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

});
 

Мне было бы удобнее полагаться на 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, вывод

попробуйте ниже css:

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

этот css не отображает кнопку удаления первого дублирующего элемента 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>
 

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

 #duplicater #removebutton {
  display: none;
}