Categories

.unlink()

Categories: Data Link

.unlink( target )Returns: jQuery

Plugin: jQuery.fn.datalink

Description: Remove a previously created link.

  • .unlink( target )

    version added: 1.0

    target   An object to unlink.

Links created with .link() can be removed with .unlink().

var person = {};
$("form").link(person);
$("[name=firstName]").val("aValue");
person.firstName; // aValue
$("form").unlink(person);
$("[name=firstName]").val("aNewValue");
person.firstName; // still "aValue"

If the original link matched multiple elements, .unlink() may also be used to remove the link on a subset of the elements. The following example shows how to link all input elements to an object, and then how to unlink input elements that have a specified CSS class:

var person = {};
$("input").link(person);
$(".nolink").unlink(person);

.unlink() can unlink elements that were part of the original link, but note that .link() also responds to bubbled-up change events from the selected elements' descendants. .unlink() will only unlink elements that were explicitly matched by the original link, not descendants of those elements.

Note:

This feature and its documentation are in beta and subject to change before final release.
  • Link all input elements of a form to an object, then remove the link.

    HTML:
    
    <form>
        <div>
            First Name:
            <input type="text" name="firstName" />
        </div>
        <div>
            Last Name:
            <input type="text" name="lastName" />
        </div>
        <div>
            <input id="unlink" type="button" value="unlink" />
        </div>
    </form>
    Object.firstName: <span id="objFirst"></span><br/>
    Object.lastName <span id="objLast"></span>
    
    Code:
    
        var person = { };
        $("form").link(person);
    
        // Chain link the person object to these elements to show the results
        $("#objFirst").link(person, {
            firstName: {
                name: "objFirst",
                convertBack: function(value, source, target) {
                    $(target).text(value);
                }
            }
        });
        $("#objLast").link(person, {
            lastName: {
                name: "objLast",
                convertBack: function(value, source, target) {
                    $(target).text(value);
                }
            }
        });
    
        // remove link
        $("#unlink").click(function() {
            $("form").unlink(person);
        });