Question

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

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

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

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

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

Answer 1

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来完成它。

Answer 2

你可以尝试，

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

Answer 3

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

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

从jQuery: How to listen for DOM changes?

考虑这个例子

{{1}}

Answer 4

我对您的要求的解释：如果只有一个项目，请不要显示删除按钮;如果有多个项目，请显示每个项目的删除按钮。

您的尝试无效，因为.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; }

这样，如果项目/ li /无论是唯一项目，那么其删除按钮将自动隐藏，但只要您添加其他项目，就会自动显示所有项目的删除按钮

这是一个简单的演示，带有一些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>

Answer 5

是的，仅限于 css 。我希望这段代码有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery在附加的div

5 个答案: