prototype.js

Nested = Behavior.create({
  initialize: function(options) {
    this.options = Object.extend({
      evaluateScripts : true
    }, options || {});
    this.container = this.options.container || 'li'
  },
  _replace_ids : function (s){
    var new_id = new Date().getTime();
    return s.replace(/NEW_RECORD/g, new_id);
  },
  onclick : Event.delegate({
    '.add_nested_item' : function (e){
      el = e.element();
      template = eval(el.href.replace(/.*#/, ''));
      $(el.rel).insert({     
        bottom: this._replace_ids(template)
      });
      Event.stop(e);
    },
    '.remove_nested' : function(e){
      var el = e.element();
      var cnt = el.up(this.container);
      var delete_field = cnt.down('._delete');
      if(delete_field){
        delete_field.value = 1;
        cnt.hide();
      }else{
        cnt.remove();
      }

      Event.stop(e);
    }
  })
});
Event.addBehavior({
  '.nested_set' : Nested
})

right.js

/**
 * Nested Set for RightJS
 *
 * Copyright (C) 2010 Andrew Kalek, Anlek Consulting
 */

if (!RightJS) throw "This is design to be used with RightJS";

/**
 * Used to add/remove nested form items
 *
 */

var Nested = new Class({
  initialize: function(element){
    this.element = element;
    this.template_name = this.element.attributes['data-template'].value;
    this.template = eval(this.template_name);
    
    var click_behavior = Event.delegate({
      '.add_nested': function(e){
        e.stop();
        $(e.originalTarget.attributes['rel'].value).insert(this._replace_ids(this.template), 'bottom');
        $(e.originalTarget.attributes['rel'].value).lastChild.fade('in');
    }.bind(this),
      '.remove_nested': function(e){
        e.stop();
        var item = e.originalTarget.parent('.item');
        if(!item.select('.delete').empty()){
          item.select('.delete').first().value = 1;
          item.fade('out');
        }else{
          item.fade('out', {onFinish: function(){
            item.remove();
          }});
        }
      }
    });
    
    this.element.on('click', click_behavior);
  },
  _replace_ids: function (s){
    var new_id = new Date().getTime();
    return s.replace(/NEW_RECORD/g, new_id);
  }
  
});


document.on('ready',function(){
  var nested_objects = [];
  $$('.nested').each(function(element, idx){
    nested_objects.push(new Nested(element));
  });
});

source.html

<fieldset data-template="image_template" class="nested">
    <legend>
      Images
    </legend>
    <ol id="images" class="nested_container">
      <script type="text/javascript">
      //&lt;![CDATA[
      var image_template = "&lt;li class=\"item\"&gt;&lt;label for=\"deal_image_attributes_NEW_RECORD_source\"&gt;Image&lt;\/label&gt;\n&lt;input id=\"deal_image_attributes_NEW_RECORD_source\" name=\"deal[image_attributes][NEW_RECORD][source]\" size=\"30\" type=\"file\" /&gt;\n\n&lt;a href=\"#\" alt=\"Remove Deal image\" class=\"remove_nested\" title=\"Remove Deal image\"&gt;x&lt;\/a&gt;\n&lt;\/li&gt;"
      //]]&gt;
      </script>
      <li id="4c087054b57f987959000004" class="item"><label for="deal_image_attributes_4c087054b57f987959000004_source">Image</label>
      <input type="file" size="30" name="deal[image_attributes][4c087054b57f987959000004][source]" id="deal_image_attributes_4c087054b57f987959000004_source">
      <img src="/system/deals/sources/4c087054b57f987959000004/thumb_andrew_facebook2.jpg?1275621460" class="small_thumb" alt="Thumb_andrew_facebook2">
      <a title="Remove Deal image" class="remove_nested" alt="Remove Deal image" href="#">x</a><input type="hidden" name="deal[image_attributes][4c087054b57f987959000004][_delete]" id="deal_image_attributes_4c087054b57f987959000004__delete" class="delete" value="1">
      </li>
    </ol>
    <a rel="images" class="add_nested" href="#image_template">Add new image</a>
  </fieldset>