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

Answer 1

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);

Answer 2

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