• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • Tutorials
    • API Docs
  • Community
    • Gallery
    • Blog »
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • YUI 2
    • YUI Compressor
    • YUI Doc »
    • YUI Builder
    • YUI PHP Loader
    • YUI Test
    • YUI Website
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • FAQ
  • Developer FAQ
  • Developer Guide
  • Module Setup

Tag Cloud

css jafl apipkin table satyam davglass solmsted greghinch liferay nzakas yql foxxtrot lsmith ericf event io widget node form model async datatable plugin caridy animation

Context Navigation

    YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

    Add Remove (gallery-add-remove)

    Last Updated: 02/16/11
    + 0 -

    David Martin

    See 1 more by this user.

    Created: 02/16/11
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.3.0
    Free for use.

    Add Remove is simple module to quickly create add/remove functionality for lists of items. Useful for quickly adding items like addresses and locations.

    • Tags:
    • drmartin
    • add
    • remove
    • clone
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    The add, remove and original nodes may be of any element type. The module keeps track of the nodes it has added and will remove the last node added. Passing in the animate attribute will turn fading in and out on or off.

    Code Sample

    YUI().use('gallery-add-remove', function(Y) {
     
         Y.on("domready", function(){
     
         var addRemove = new Y.addRemove({
              addNode: Y.one('#locationAddButton'),
    	  removeNode: Y.one('#locationRemoveButton'),
    	  originalNode: Y.one('.locationWrapper'),
              animate: true
         });
     
         addRemove.init();
    });
     
     
    <div class="locationWrapper" style="border: 1x solid #ccc; margin: 20px;">
    	<div>Location Address: <input type="text"></div>
    	<div>Location Phone: <input type="text"></div>
    </div>
    <button type="button" id="locationAddButton">Add</button>
    <button type="button" id="locationRemoveButton">Remove</button>

    Forum Posts

    No forum posts for this module.

    © 2006-2011 Yahoo! Inc. All rights reserved.
    All code on this site is licensed under the BSD License unless stated otherwise.
    About This Site · Security Contact Info