Delete textbox dynamically on click (ColdFusion) jquery

Question

I have a form where the user can click a particular link and dynamically add text boxes . I want to be able to put up a delete link to delete a particular text box which is dynamically added by the user if it is not required. Currently the text box is not used if the user leaves it blank. My HTML Looks like below:

<div>
    <div id="MyRecommends">
    <cfscript>
            thisInstance.count = 1;
    </cfscript>
        <cfif thisInstance.recommendationCorrectiveAction.RecordCount>
            <input type="hidden" id="correctiveActionCount" name="correctiveActionCount" value="#thisInstance.recommendationCorrectiveAction.RecordCount#">
            <cfloop query="thisInstance.recommendationCorrectiveAction">
                <div id="my#thisInstance.count#Div">
                <textarea id="corrective#thisInstance.count#" name="corrective#thisInstance.count#"  rows="12" cols="50" class="field textarea small">#thisInstance.recommendationCorrectiveAction.action_what#</textarea>  
                </div>
                <cfscript>
                thisInstance.count = thisInstance.count+1;
                </cfscript>
            </cfloop>
        <cfelse>
            <input type="hidden" id="correctiveActionCount" name="correctiveActionCount" value="#thisInstance.count#">
            <div id="my#thisInstance.count#Div">
            <textarea id="corrective#thisInstance.count#" name="corrective#thisInstance.count#"  rows="12" cols="50" class="field textarea small"></textarea>   
            </div>
        </cfif>
    </div>

    <span class="link" id="add">Click HERE to Add More Recommended Corrective Actions</span>


</div>

You can ignore the cfif part since that is the case where the text boxes are populated according to the rows in the DB. In case there is no data in the DB only one text box shows up and the user can click on "Click HERE to Add More Recommended Corrective Actions" to add as many text boxes. Here is the JQuery function:

<cfsavecontent variable="request.jQueryAddOn">
<script language="JavaScript1.2">
$(document).ready(function(){    
 var str = '<div id="my{0}Div"><textarea id="corrective{0}" name="corrective{0}" rows="12" cols="50" class="field textarea small"></textarea></div>';
<cfif thisInstance.recommendationCorrectiveAction.RecordCount>
var i = <cfoutput>#thisInstance.recommendationCorrectiveAction.RecordCount#</cfoutput>+1;
<cfelse>
var i = 2;      
</cfif>
function addRow() {
    updateStr = jQuery.format(str, i);      
    $(updateStr).appendTo("#MyRecommends");
    objForm.correctiveActionCount.setValue(i);      
    i++;        
}

$("#add").click(addRow);
});

I'm not sure if remove() is a method in JQuery which will remove any dynamically added element. I have never used JQuery before so I'm not totally sure how to go about this.

Answer 1

I am not pretty sure about your HTML markup, may be since it is in ColdFusion but here's what you can do to remove dynamically added textboxes:

var counter = 2;
$("#removeButton").click(function () {
    if (counter == 1) {
        alert("No more textbox to remove");
        return false;
    }
    counter--;
    $("#TextBoxDiv" + counter).remove();
});

FULL DEMO HERE

Answer 2

Yes you can remove any dynamically added elements using jquery's remove() method, provided you must have the id or DOM reference to that element. In your case, include the remove link also in the same container DIV where your text box resides and initiate a call to function on the onclick event of that link with a reference to itself. eg: Onclick="function_name(this)" and with in the function you can access the parent container with jquerys another method like $(this).parent(). And you can remove that dynamically added elements with $(this).parent().remove() method. Hope this will help you find a solution to your problem.