title: Removing items from Spring's AutoPopulatingList
body: <p>I have created a dynamic form using Spring AutoPopulatingList and JQuery. Addition works like a charm, new items are created and persisted to the database. The issue is with deletion: my update method always gets the full list, regardless of deletion of the elements on the browser side.</p>
  
  <p>Controller's update method is simple as that</p>
  
  <pre><code>@RequestMapping(value = "/user/{id}", method = RequestMethod.POST)
  @ResponseBody
  public String updateUser(@PathVariable("id") int id, @ModelAttribute("user") User user, HttpServletRequest request) {
      userService.update(user);
      return messageSource.getMessage("user.data_updated", null, request.getLocale());
  }
  </code></pre>
  
  <p>User POJO implementation as follows</p>
  
  <pre><code>@Entity
  public class User implements Serializable {
  ...
  
  @OneToMany(targetEntity = Language.class, fetch = FetchType.EAGER, cascade = CascadeType.ALL)
  private List&lt;Language&gt; languages = new AutoPopulatingList(Language.class);
  ...
  }
  </code></pre>
  
  <p>The POST request which goes to my controller looks like that (addition, language 2 added):</p>
  
  <pre><code>languages[0].code:pl
  languages[0].level:Fluent
  languages[1].code:de
  languages[1].level:Native
  languages[2].code:cc
  languages[2].level:Intermediate
  </code></pre>
  
  <p>and removal(language 1 removed using JQuery <em>.remove()</em> method):</p>
  
  <pre><code>languages[0].code:pl
  languages[0].level:Fluent
  languages[2].code:cc
  languages[2].level:Intermediate
  </code></pre>
  
  <p>so from the communication side looks OK, but the user retrieved from @ModelAttribute("user") in updateUser method still has three language elements, all valid (that is not null).
  Any suggestions?
  I'm using Spring 3.1.1 and JQuery 1.7.2 if that's relevant.</p>
  
  <p>EDIT:
  The client side code for adding/removal of fields is as follows:</p>
  
  <pre><code>$.addLanguage = function()  {
              var newLanguage = $('&lt;input type="text" id="languages' + languagesCounter + '.code" name="languages[' + languagesCounter + '].code" class="langIdentifier"/&gt;' +
                                  '&lt;select id="languages' + languagesCounter + '.level" name="languages[' + languagesCounter + '].level" class="langSelect"&gt;'  +
                                      '&lt;option value="Basic"&gt;Basic&lt;/option&gt;' +
                                      '&lt;option value="Intermediate"&gt;Intermediate&lt;/option&gt;' +
                                      '&lt;option value="Fluent"&gt;Fluent&lt;/option&gt;' +
                                      '&lt;option value="Native"&gt;Native&lt;/option&gt;' +
                                  '&lt;/select&gt;' +
                                  '&lt;input type="button" id="remove' + languagesCounter + '" onclick="$.removeLanguage(' + languagesCounter + ')"' +
                                          'name="Remove" value="Remove" class="removeButton"/&gt;' +
                                  '&lt;br/&gt;');
              languagesCounter++;
              newLanguage.insertBefore($("#add"));
          }
  </code></pre>
  
  <p>and for removal:</p>
  
  <pre><code>$.removeLanguage = function(languageId) {
      var languageField = '#languages' + languageId + '\\.code';
      var levelField = '#languages' + languageId + '\\.level';
      var removeButton = '#remove' + languageId;
      $(languageField).fadeOut(250, function() { $(this).remove(); });
      $(levelField).fadeOut(250, function() { $(this).remove(); });
      $(removeButton).fadeOut(250, function() { $(this).remove(); });
  };
  </code></pre>