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。我不想要显示第一个主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

使用以下链接可能可以帮助您

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

我觉得更依赖javascript来做这个而不仅仅是CSS。这只是我的意见。除非您确实需要为其他用途分配IDs，否则我不会因为在这种情况下不需要它们。您可以在jQuery中使用$(this).parent().remove()函数。这将删除该元素，而不必定位任何特定的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

Answer 3

尝试下面的css：

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

此css不显示第一个复制div元素的删除按钮。

我希望这会对你有所帮助。

Answer 4

使用以下代码

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 5

您可以使用CSS隐藏它。

#duplicater #removebutton {
  display: none;
}

删除第一个div的删除按钮？

5 个答案: