CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kim Carlo
Kim Carlo

Reputation: 1223

JQuery show delete button on appended div

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?

Upvotes: 1

Views: 1452

Answers (5)

Raeesh Alam
Raeesh Alam

Reputation: 3480

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>

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150040

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>

Upvotes: 1

Prabhat Ranjan
Prabhat Ranjan

Reputation: 398

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");

Upvotes: 0

jkris
jkris

Reputation: 6531

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.

Upvotes: 2

Dhanuka777
Dhanuka777

Reputation: 8616

You can try, 

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

Upvotes: 0

Related Questions