JQuery show delete button on appended div

Question

I have so far able to remove each appened elements using .remove() function of JQuery. my problem is the delete button is always showing on the first element.

I want to hide the delete button on first element and show the delete button when I append a new element.

I have set the delete button on the first element to

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

in my css but all succeeding appends do not show the delete button.. how can I do this with JQuery can it be done using CSS only?

Since it is first child I don't think it can done by just using css. If it is last child then it can be done using css. — Ajay Narain Mathur, Nov 28 '16 at 03:54

score 2 · Accepted Answer · answered Nov 28 '16 at 04:00

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>

Making assumptions on your markup since none was provided. You can accomplish it using css.

nnnnnn · Answer 2 · 2016-11-28T04:29:54.800

My interpretation of your requirement: If there is only one item, do not show a delete button; if there are multiple items, show a delete button for every item.

Your attempt didn't work because .delete-button:first-child selects all elements with the delete-button class that are also the first-child of their parent element. Presumably this would be all of your buttons.

You can instead use the :only-of-type selector on the elements that contain the delete buttons, e.g., assuming they have the item class:

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

Or if they are li elements:

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

That way if the item/li/whatever is the only item then its delete button will be hidden automatically, but as soon as you add additional items the delete button will be shown automatically for all items.

Here's a simple demo with a bit of JS to mock up the add and delete functionality:

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

this is good.. but how can I hide the delete button on the first one?? I need the delete button to show only on the succeeding appends.. — Kim Carlo, Dec 02 '16 at 14:23
You could use the [`:first-of-type` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type) with the above, but why would you want no delete button on the first one? What if that's the one the user wants to delete? — nnnnnn, Dec 03 '16 at 04:52

score 0 · Answer 3 · answered Nov 28 '16 at 03:56

0

You can try,

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

answered Nov 28 '16 at 03:56

Dhanuka777

8,331
7
70
126

1

That is not valid css – Ajay Narain Mathur Nov 28 '16 at 03:57

score 0 · Answer 4 · edited May 23 '17 at 11:53

0

You might wanna consider browser compatibility before using CSS - Browser support for CSS :first-child and :last-child

Having said that, With jQuery you can write an event handler to change css of all the child elements except the last.

Consider this example from jQuery: How to listen for DOM changes?

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

edited May 23 '17 at 11:53

Community

1
1

answered Nov 28 '16 at 04:11

Prabhat Ranjan

400
3
17

score 0 · Answer 5 · answered Nov 28 '16 at 04:30

Yes, Its possible by css only. I hope this snippet helps.

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

JQuery show delete button on appended div

5 Answers5