Delete the delete button on the first set of fields

Question

http://jsfiddle.net/NzbRQ/2/

I allow the user to add multiple rows of fields, but I do not want to include the delete link in the first row of fields, so they cannot delete all fields.

Also, how to limit it to only three rows of fields?

Answer 1

Try this script: Fiddle

For the first part of hiding the deletion in the first line, I called the following when the page loaded:

$(".removeoutcome").hide(); 

Then, to make sure that they cannot add more than 3 or remove the last, I added length checks to your click methods, see

 $('.addoutcome').live('click', function() { if ($(".outcomegroup").length < 3) { $('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show(); renumber(); } }); $('.removeoutcome').live('click', function() { if ($(".outcomegroup").length > 1) { $(this).closest('.outcomegroup').remove(); renumber() } }); 

Also, on the side, the live note is now deprecated, so if you are using jQuery 1.7, change these methods to on or if you are before 1.7, use delegate .

Answer 2

You can simply hide del for the first element and limit it to adding 3 more sets using the following code

 var count = 3; $('.minus').first().hide(); $('.addoutcome').live('click', function() { count--; if(count < 0 )return; $('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show(); }); 

here is the working script http://jsfiddle.net/joycse06/uW9NQ/

Answer 3

Updated: http://jsfiddle.net/NzbRQ/5/

First .live ditch. I added section to give a more specific selector than body , but there is probably something better that you can use in your original DOM.

Just don't delete the last line using simple logic. Your logic for displaying the future "del" link was actually already there! You don’t even need the logic of deleting the last line, since just not showing “del” is enough, but I was just thorough.

Answer 4

I don’t know why no one paid close attention to this line:

 .find('.minus').show(); 

where he definitely did not hide the del element. In short, the only thing you need to do is add the correct CSS rule:

 .minus { display: none; } 

and that he, the first element will not show the del link, and the rest will.

The limit for three elements is simple.

 $("[parent element]").on('click', '.addoutcome', function() { if($('.addoutcome').length > 2) return; ... }); 

The best [parent selector] necessary and completely depends on your layout. Basically, this is the element that wraps all these elements, the parent element of all of them.