JQuery在附加的div上显示删除按钮答案

【问题标题】：JQuery show delete button on appended divJQuery在附加的div上显示删除按钮
【发布时间】：2017-04-11 17:42:47
【问题描述】：

到目前为止，我已经能够使用 JQuery 的 .remove() 函数删除每个附加的元素。我的问题是删除按钮总是显示在第一个元素上。

我想在第一个元素上隐藏删除按钮，并在添加新元素时显示删除按钮。

我已将第一个元素上的删除按钮设置为

 .delete-button:first-child{
    display:none;
 }

在我的 css 中，但所有后续的附加都没有显示删除按钮.. 我怎么能用 JQuery 做到这一点，只能使用 CSS 完成吗？

【问题讨论】：

因为它是第一个孩子，我认为仅仅使用 css 是无法做到的。如果它是最后一个孩子，那么它可以使用 css 来完成。
你能提供一些标记吗？

标签： javascript jquery html css

【解决方案1】：

是的，只有 css 才有可能。我希望这个 sn-p 有帮助。

$(document).on('click','#AppendList', function(){
	$("ul").append('<li>List <button class="delete-button">Delete</button></li>');
})

li .delete-button { display:none }
li:last-child .delete-button { display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<li>
    First <button class="delete-button">Delete</button>
	</li>
	<li>
    Second <button class="delete-button">Delete</button>
	</li>
</ul>
<hr>
<button type="button" id="AppendList">Add List</button>

【讨论】：

【解决方案2】：

我对你的要求的解释：如果只有一项，不显示删除按钮；如果有多个项目，则为每个项目显示一个删除按钮。

您的尝试没有成功，因为.delete-button:first-child 选择了所有具有delete-button 类的元素，这些元素也是其父元素的first-child。大概这就是你所有的按钮。

您可以在包含删除按钮的元素上使用:only-of-type selector，例如，假设它们具有item 类：

.item:only-of-type .delete-button { display: none; }

或者如果它们是 li 元素：

li:only-of-type .delete-button { display: none; }

这样，如果 item/li/whatever 是唯一的项目，则其删除按钮将自动隐藏，但一旦您添加其他项目，删除按钮将自动显示所有个项目.

这是一个简单的演示，带有一点 JS 来模拟添加和删除功能：

$("#parent").on("click", ".delete-button", function() {
  $(this).parent().remove();
});
$(".add-button").on("click", function() {
  $("#parent").children().first().clone().appendTo("#parent");
});

.item:only-of-type .delete-button { display: none; }

.item { margin: 3px; padding: 2px; width: 100px; border: thin black solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="add-button">Add Item</button>
<div id="parent">
  <div class="item">
    <button class="delete-button">Delete</button>
    <div>An item</div>
  </div>
</div>

【讨论】：

这很好.. 但是如何隐藏第一个上的删除按钮？我需要删除按钮只显示在后续的追加..
你可以在上面使用:first-of-type selector，但是为什么你不想在第一个上没有删除按钮呢？如果那是用户想要删除的那个怎么办？

【解决方案3】：

在使用 CSS 之前，您可能需要考虑浏览器兼容性 - Browser support for CSS :first-child and :last-child

话虽如此，使用 jQuery 您可以编写一个事件处理程序来更改除最后一个之外的所有子元素的 css。

考虑这个来自jQuery: How to listen for DOM changes?的例子

$("element-root").bind("DOMSubtreeModified", "CustomHandler");

【讨论】：

【解决方案4】：

li:first-child .delete-button { display:none }

<ul>
<li>
     First <button class="delete-button">Delete</button>
</li>
<li>
     Second <button class="delete-button">Delete</button>
</li>
</ul>

对您的标记做出假设，因为没有提供任何内容。您可以使用 css 完成它。

【讨论】：

【解决方案5】：

你可以试试，

div ul:not(:first-child) {
    .delete-button{
    display:none;
 }
}

【讨论】：

这不是有效的 css