remove html elements

[teedoff]

New thread, new issue, same jquery as my previous question

My js created a dropwdown and user input form fields with a click event. The user can add up to three and the "Add" link is removed upon reaching 3 elements.

Then I have a link to Remove an input in case the user doesnt want to enter more than has been added. The problem now is, we validate the form and at least ONE input must be filled out. SO I need to always have at least one input in the document. My code has a Remove link beside each input ands the user can remove all three.

I was trying to read about the filter() method and filtering the element based on first:child or something similar.

Code:

  $(document).ready(function(){
   $(".addSMRow").bind("click", function(){
    var $socialForms = $(".socialForms");
    if($(".sm_row").size() < 3){
     $(".moreSocial").append($socialForms.html());
    }/*JME - we can work on the remove link showing up tomorrow*/
    if($(".sm_row").size() > 1){
     $(".remove_row").show()
    }
    if($(".sm_row").size() == 3){
     $(".addSMRow").hide();
    }
    else{
     $(".addSMRow").show();
    }
    return false;
   });
   if($(".sm_row").size() == 3){
    $(".addSMRow").hide();
   }
   $(".remove_row").live("click", function(){
    $(this).parent().remove();
    $(".addSMRow").show();
    return false;
   });
  });

As you can see, the code says if .sm_row is greater than 1 then show() remove_row

I need to somehow set an else statement if sm_row is greater than 1, the hide remove_row on the first sm_row only.

Hope all this made sense. Any help is greatly appreciated.

[VIPStephan]

jQuery is a JavaScript framework, therefore it belongs into the frameworks sub forum. Just FYI and for potential future requests.

[teedoff]

Originally Posted by VIPStephan

jQuery is a JavaScript framework, therefore it belongs into the frameworks sub forum. Just FYI and for potential future requests.

You're right, sorry lol

[AndrewGSW]

One way:

if($(".sm_row").size() > 1){
     $(".remove_row").show();
     $(".remove_row").first().hide();
    }

This answers your request, but I'm guessing that you really want to hide remove_row for "whichever single input remains" - rather than always the first one?

[teedoff]

Originally Posted by AndrewGSW

One way:

if($(".sm_row").size() > 1){
     $(".remove_row").show();
     $(".remove_row").first().hide();
    }

This answers your request, but I'm guessing that you really want to hide remove_row for "whichever single input remains" - rather than always the first one?

No thats right. The user form starts with one input. The user can add two more, but one will always be available and required according to validation rules. So the Remove text link should only display and work for any inputs added. Not the first constant input on the form.


I'm not at work now and my remote access is buggy tonight, so I'll check this out when I get in to work in the morning. Thanks!

[teedoff]

Such a simple solution! Thanks Andrew for the help! Worked great.