How do I clone element events excluding data in jQuery?

Question

I am trying to clone the html div element with class ".age-sex-details" and the events bound to the ".age-sex-remove" and ".age-sex-add" classes shown below using the jquery clone function. I am able to clone the div, the events mentioned above and data entered into the input boxes using the .clone(true) function, but I need to clone the div element and the mentioned events but not the data entered in the "count" and "age" input fields. Is this possible?

Brief Description of Code

The jQuery code below consists of two functions in the document ready function. You can ignore the first one. The second function is where I do the cloning. I clone the div element shown in the HTML below and insert it after itself.

iQuery Code

$(document).ready(function() {
        $(".age-sex-remove").click(function() {
            var index = $(".age-sex-details").length;
            if ( index > 1) {
                $(this).parent().remove();
                $($(".age-sex-add")[index - 2]).show();
            } else {
                console.log("only one set of age sex details, therefore clear values.")
            }
        });

        /**
         * Clone age-sex-details div including events and excluding data.
         * Hide the previous add new sex age details link.
         */
        $(".age-sex-add").click(function() {
            var index = $(".age-sex-details").length;
            console.log("Index = " +index);
            $($(".age-sex-details")[index - 1]).clone(true).insertAfter($(".age-sex-details")[index - 1]);
            $($(".age-sex-add")[index - 1]).hide();
        });
    });

HTML

<div class="form-inline age-sex-details">
    <div class="form-group">
        <label for="Count">Count</label>
        <input type="text" name="count" class="form-control" id="Count" />
    </div>    
    <div class="form-group">
        <label for="Age">Age</label>
        <input type="text" name="age" class="form-control" id="Age" />
    </div>    
    <div class="form-group">
        <label for="Sex">Sex</label>
        <select name="sex" class="form-control" id="Sex">
            <option value="0">Female</option>
            <option value="1">Male</option>
        </select>
    </div>    
    <a href="#" class="glyphicon glyphicon-remove age-sex-remove">&nbsp;</a>
    <a href="#" class="glyphicon glyphicon-plus age-sex-add">&nbsp;</a>
</div>

Here is a JSFiddle for the code

Thanks, Yusuf

What exactly do you want to have removed? Do you mean the value put into the inputs? — Colin DeClue, Jan 10 '14 at 21:41
@Colin, `clone()` does not clone dynamic state (such as values entered in `` elements). — Frédéric Hamidi, Jan 10 '14 at 21:43
@AngularAddict Thanks for the suggestion. I need to remove the text from the elements within a particular div with class _age-sex-details_. Your suggestions leaves me with an empty set of divs for all divs that have the class _.age-sex-details_. — ysfiqbl, Jan 10 '14 at 21:53
@Colin DeClue I want to remove the values that will be in the inputs of the cloned elements. I basically want to clear the values in the input boxes of the cloned div and was wondering if there was a better way of clearing the values instead of looping through the div and clearing the input values individually. — ysfiqbl, Jan 10 '14 at 21:57
@ysfiqbl, `clone()` is explicitly documented ([first paragraph, after the headers](http://api.jquery.com/clone/)) as not copying `` values. Unless you have set `value` HTML attributes you want to clear in the clones? — Frédéric Hamidi, Jan 10 '14 at 22:05
You could first get cloned html ro variable. Then do as i said with variable as selector. And then append to html variable contents. — makallio85, Jan 10 '14 at 22:06
@FrédéricHamidi I noticed that too, but it does copy the dynamic values. I even tried setting the default values in the input boxes using `value=""`. — ysfiqbl, Jan 10 '14 at 22:18
@ysfiqbl, you're right, I can repro this on Firefox. Looks like the docs are wrong, I'll update my answer. — Frédéric Hamidi, Jan 10 '14 at 22:23

Frédéric Hamidi · Accepted Answer · 2014-01-10T22:36:25.730

7

You can call removeData() without arguments after cloning the element:

var cloneWithEventsOnly = $("selector").clone(true).removeData();

EDIT: It looks like you want to clear the form control values (which should not be copied in the first place according to clone()'s documentation, but apparently are).

In that case, you can match form controls with the :input selector and clear their values with val():

var cloneWithoutValues = $("selector").clone(true).find(":input").val("").end();

Or, in your particular case:

var source = $(".age-sex-details").eq(index - 1);
source.clone(true).find(":input").val("").end().insertAfter(source);

edited Jan 10 '14 at 22:36

answered Jan 10 '14 at 21:19

Frédéric Hamidi

258,201
41
486
479

I don't see him calling `.data()` anywhere, so I don't think that's what he means. – Colin DeClue Jan 10 '14 at 21:42
I tried calling `.removeData()`, but it does not do anything. Probably because I do not set the values using `.data()`. According to jQuery [documentation](http://api.jquery.com/jquery.removedata/) I can use `.removeData()` to remove data that was set by `.data()`. – ysfiqbl Jan 10 '14 at 22:00

makallio85 · Answer 2 · 2014-01-11T07:50:31.257

1

 var data = $($(".age-sex-details")[index - 1]).clone(true);
 $(data).find(':input').val("");;
 $(datal).insertAfter($(".age-sex-details")[index - 1]);

edited Jan 11 '14 at 07:50

answered Jan 10 '14 at 22:13

makallio85

1,366
2
14
29

Thanks! It works if you replace `$(html).insertAfter($(".age-sex-details")[index - 1]);` with ` $(data).insertAfter($(".age-sex-details")[index - 1]);` – ysfiqbl Jan 10 '14 at 22:38

How do I clone element events excluding data in jQuery?

Brief Description of Code

iQuery Code

HTML

2 Answers2