title: Rails nested forms , hide remove button for first element
body: <p>Hi i hava a Rails app that uses nested forms, so for example on a section you can add, as many links as you want.. also i have this other code for citizen as some user have two citizens. </p>
  
  <p>My problem here is that at least you need to enter 1 citizen.. this i can make it with jquery validate, im already running that.. The problem is the Delete button that Rails insert for each field.. So i can literaly delete all fields in the form </p>
  
  <p>Is there a way so just the fields added by user have the delete button.. and not all of them?</p>
  
  <p>Is there any documentation about this.. i cant found it.</p>
  
  <p>Here is my code in view..</p>
  
  <pre><code> &lt;div id="nacionalidad"&gt;
   &lt;%= f.fields_for :citizens do |citizen_form| %&gt;
  
      &lt;div&gt;
        &lt;%= citizen_form.label  :citizen, t('generales.citizen')  %&gt;
        &lt;%= citizen_form.select :country_id , Country.all.collect {|p| [ t("generales."+p.iso), p.id ] }, { :include_blank =&gt; true } , { :class =&gt; 'pca33' } %&gt;
        &lt;div id="delerr"&gt;&lt;%= citizen_form.link_to_remove t('generales.delete') %&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;% end %&gt;
  
    &lt;%= f.link_to_add t('generales.add'), :citizens %&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The model citizen.rb</p>
  
  <pre><code>class Citizen &lt; ActiveRecord::Base
    attr_accessible :country_id
  
    belongs_to :player
  
  
  end
  </code></pre>
  
  <p>Thanks</p>
  
  <p>Here is the full view code. Everything is working just 2 issues:</p>
  
  <p>1) The delete button is present always even for first item, need to remove this delete btn for 1st item</p>
  
  <p>2) If i select a country for citizen, it adds a second option, is there a way to avoid this.. and Only add the new field if the user clics on this.. add button..</p>
  
  <p>Thanks!!!</p>
  
  <p>Full View Code</p>
  
  <pre><code>&lt;!-- Información personal y de contacto --&gt;
  
  
  &lt;div id="wrapper_signup"&gt;
  
   &lt;%= link_to image_tag("espanol/logo.jpg", :border =&gt; 0), root_path , :class =&gt; 'logoo' %&gt;
  
    &lt;div id="loggeddiv"&gt;
      &lt;%= link_to "#{current_user.email}", '#' %&gt; |
       &lt;%= link_to (t ('generales.salir')), destroy_user_session_path, :method =&gt; :delete  %&gt;
    &lt;/div&gt;
  
   &lt;div id="navsteps" &gt;
  
   &lt;/div&gt;
  
     &lt;div id="signupdiv"&gt;
  
  
  
  &lt;%= nested_form_for @player,  :url =&gt; wizard_path do |f| %&gt;
  
    &lt;div id="nombre"&gt; 
      &lt;%= f.label      :name %&gt;
      &lt;%= f.text_field :name , :value =&gt; "#{current_user.name}"%&gt;
    &lt;/div&gt;
  
      &lt;div id="apellidos"&gt;
      &lt;%= f.label      :lastname %&gt;
      &lt;%= f.text_field :lastname, :value =&gt; "#{current_user.lastname}" %&gt;
    &lt;/div&gt;
  
      &lt;div id="cumple"&gt;
      &lt;%= f.label       :birthday %&gt;
      &lt;%= f.date_select :birthday, :start_year =&gt; 1950, :include_blank =&gt; true %&gt;
    &lt;/div&gt;
  
     &lt;div id="altura"&gt;
      &lt;%= f.label  :height %&gt;
      &lt;%= f.select :height, Player::HEIGHT.each {|h| [ h, h ] } , :include_blank =&gt; true %&gt; &lt;%= f.select :height_measure, Player::HEIGHT_MEASURE.each {|h| [ h, h ] } %&gt;
      &lt;%= f.select :inches, Player::INCH.each {|h| [ h, h ] }, {}, :style =&gt;  (@player.inches.present? &amp;&amp; @player.height_measure == 'pies' ? 'display: inline ' : 'display: none') %&gt;
      &lt;%= f.label :inches, :id =&gt; 'inch_label', :style =&gt; (@player.inches.present? &amp;&amp; @player.height_measure == 'pies' ? 'display: inline ' : 'display: none') %&gt;
    &lt;/div&gt;
  
    &lt;div id="peso"&gt;
      &lt;%= f.label  :weight %&gt;
      &lt;%= f.select :weight, Player::WEIGHT.each {|w| [ w, w ] }, :include_blank =&gt; true  %&gt; &lt;%= f.select :weight_measure, Player::WEIGHT_MEASURE.each {|h| [ h, h ] } %&gt;
    &lt;/div&gt;
  
  
      &lt;div id="ciudad"&gt;
      &lt;%= f.label      :city %&gt;
      &lt;%= f.text_field :city %&gt;
    &lt;/div&gt;
  
      &lt;div id="cnatal" &gt;
      &lt;%= f.label      :birthplace %&gt;
      &lt;%= f.text_field :birthplace %&gt;
    &lt;/div&gt;
  
    &lt;div id="nacionalidad"&gt;
   &lt;%= f.fields_for :citizens do |citizen_form| %&gt;
  
      &lt;div&gt;
        &lt;%= citizen_form.label  :citizen, t('generales.citizen')  %&gt;
        &lt;%= citizen_form.select :country_id , Country.all.collect {|p| [ t("generales."+p.iso), p.id ] }, { :include_blank =&gt; true } , { :class =&gt; 'pca33' } %&gt;
        &lt;div id="delerr"&gt;&lt;%= citizen_form.link_to_remove t('generales.delete') %&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;% end %&gt;
  
    &lt;%= f.link_to_add t('generales.add'), :citizens %&gt;
    &lt;/div&gt;
  
    &lt;div id="idiomlen"&gt;
  
      &lt;%= f.label        :languages %&gt;
  
      &lt;% for language in Language.find(:all) %&gt;
        &lt;div class="idiomlenbox"&gt;&lt;%= check_box_tag "player[language_ids][]", language.id, @player.languages.include?(language) %&gt;
        &lt;%= t("languages.#{language.name}") %&gt;&lt;/div&gt;
      &lt;% end %&gt;
  
      &lt;div id="idiomlenotro"&gt;
        &lt;%= f.label      :other_languages %&gt;&lt;br&gt;
        &lt;%= f.text_field :other_languages %&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
      &lt;div id="cargafoto"&gt;
  
  
      &lt;button type="button" class="photo-button" onclick="document.getElementById('files').click();"&gt;&lt;p&gt; &lt;%= t('generales.photo') %&gt; &lt;/p&gt;&lt;/button&gt;
    &lt;div id="upload-wrap"&gt;
  
       &lt;%= f.file_field :avatar , id: "files" %&gt;
  
     &lt;/div&gt;
  
          &lt;div class="thumbperwrap"&gt;
          &lt;output id="list"&gt;
  &lt;div class="wraptocenter"&gt;&lt;span&gt;&lt;/span&gt;
  &lt;% if @player.avatar.present? %&gt;
        &lt;%= image_tag @player.avatar.url(:profile), :class =&gt; "thumbper" %&gt;
       &lt;% else %&gt;
         &lt;img src="../assets/espanol/playersample.png" class="thumbper"&gt;
       &lt;% end %&gt;
    &lt;/div&gt;
  
          &lt;/output&gt;
  &lt;/div&gt;
  
    &lt;/div&gt;
  
  
  
  &lt;script&gt;
    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
  
      // Loop through the FileList and render image files as thumbnails.
      for (var i = 0, f; f = files[i]; i++) {
  
        // Only process image files.
        if (!f.type.match('image.*')) {
          continue;
        }
  
        var reader = new FileReader();
  
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
          return function(e) {
            // Render thumbnail.
            document.getElementById('list').innerHTML = "";
            var span = document.createElement('span');
            span.innerHTML = ['&lt;div class="wraptocenter"&gt;&lt;span&gt;&lt;/span&gt;&lt;img class="thumbper" src="', e.target.result,
                              '" title="', escape(theFile.name), '"/&gt;&lt;/div&gt;'].join('');
            document.getElementById('list').insertBefore(span, null);
          };
        })(f);
  
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
      }
    }
  
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
  &lt;/script&gt;
  
  
  
    &lt;div id="videosyt"&gt;
      &lt;%= f.fields_for :links do |link| %&gt;
      &lt;div id="videosytin"&gt;
        &lt;%= link.label      :url %&gt;
        &lt;%= link.text_field :url %&gt;
  
        &lt;%= link.link_to_remove t('generales.delete')  %&gt;
      &lt;/div&gt;
    &lt;% end %&gt;
  
     &lt;%= f.link_to_add t('generales.add'), :links %&gt;
  
    &lt;/div&gt;
  
  
     &lt;div id="direc"&gt;
      &lt;%= f.label      :cp %&gt;
      &lt;%= f.text_field :cp %&gt;
    &lt;/div&gt;
  
  
    &lt;div id="telef"&gt;
      &lt;%= f.label      :phone %&gt;
      &lt;%= f.text_field :phone %&gt;
    &lt;/div&gt;
  
    &lt;div id="celu"&gt;
      &lt;%= f.label      :cellphone %&gt;
      &lt;%= f.text_field :cellphone %&gt;
    &lt;/div&gt;
  
     &lt;div id="webpp"&gt;
      &lt;%= f.label      :web_page %&gt;
      &lt;%= f.text_field :web_page %&gt;
    &lt;/div&gt;
  
    &lt;div id="next11"&gt;
      &lt;%= f.submit t('generales.next'), :class =&gt; 'siggreenc' %&gt;
    &lt;/div&gt;
  
  
  
  &lt;% end %&gt;
  
  
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;%= javascript_tag do %&gt;
  
    $('#player_height_measure').on('change', function() {
      if (this.value == 'pies') {
        $('#player_inches').css('display', 'inline');
        $('#inch_label').css('display', 'inline');
      } else {
        $('#player_inches').css('display', 'none');
        $('#inch_label').css('display', 'none');
      }
  
    });
  
  &lt;% end %&gt;
  
  
  &lt;style type="text/css"&gt;
  #commentForm { width: 500px; }
  #commentForm label { width: 250px; }
  #commentForm label.error, #commentForm input.submit { margin-left: 253px; }
  #signupForm { width: 670px; }
  #signupForm label.error {
    margin-left: 10px;
    width: auto;
    display: inline;
  }
  #newsletter_topics label.error {
    display: none;
    margin-left: 103px;
  }
  &lt;/style&gt;
  &lt;%= javascript_tag do %&gt;
  
  window.onload = function() {
  
  
    // validate signup form on keyup and submit
  $(".edit_player").validate({ // initialize the plugin
          errorElement: 'div'});
  
  $("#player_name").rules("add", { required: true, minlength:2, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;", minlength: "Mínimo 2 caracteres"}});
  
  $("#player_lastname").rules("add", { required: true, minlength:2, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;", minlength: "uh minlength?"}});
  
  $("#player_birthday_1i").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  $("#player_birthday_2i").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  $("#player_birthday_3i").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  $("#player_height").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  $("#player_weight").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  $("#player_city").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  $("#player_birthplace").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  $("#player_citizen").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  $("#player_phone").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  $("#player_cellphone").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  $("#files").rules("add", { required: true, messages: { required: "&lt;%= t('generales.camporequerido') %&gt;"}});
  
  
  
  };
  
  
  jQuery.extend(jQuery.validator.messages, {
      required: "&lt;%= t('generales.camporequerido') %&gt;",
      remote: "Please fix this field.",
      email: "Ingresa un correo electrónico válido.",
      url: "Please enter a valid URL.",
      date: "Please enter a valid date.",
      dateISO: "Please enter a valid date (ISO).",
      number: "Please enter a valid number.",
      digits: "Please enter only digits.",
      creditcard: "Please enter a valid credit card number.",
      equalTo: "Please enter the same value again.",
      accept: "Please enter a value with a valid extension.",
      maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
      minlength: jQuery.validator.format("Please enter at least {0} characters."),
      rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
      range: jQuery.validator.format("Please enter a value between {0} and {1}."),
      max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
      min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
  });
  
  &lt;% end %&gt;
  </code></pre>