Question

我有一个表单，用户可以单击特定链接并动态添加文本框。我希望能够建立删除链接以删除用户动态添加的特定文本框（如果不需要）。目前，如果用户将其留空，则不使用该文本框。我的HTML如下所示：

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

您可以忽略cfif部分，因为这是根据数据库中的行填充文本框的情况。如果数据库中没有数据，则只显示一个文本框，用户可以单击“单击此处添加更多推荐的纠正措施”以添加任意数量的文本框。这是JQuery函数：

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

我不确定remove（）是否是JQuery中的一个方法，它将删除任何动态添加的元素。我之前从未使用过JQuery，因此我不完全确定如何解决这个问题。

Answer 1

是的，您可以使用提供的jquery的remove（）方法删除任何动态添加的元素您必须具有该元素的id或DOM引用。在您的情况下，请在文本框所在的同一容器DIV中包含删除链接，并通过对自身的引用启动对该链接的onclick事件的函数调用。例如：Onclick =“function_name（this）” 并且在函数中，您可以使用jquerys访问父容器，例如$（this）.parent（）。您可以使用$（this）.parent（）。remove（）方法删除动态添加的元素。希望这能帮助您找到问题的解决方案。

Answer 2

我不太确定你的HTML标记，可能是因为它在ColdFusion中，但是你可以做以删除动态添加的文本框：

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

FULL DEMO HERE

单击（ColdFusion）jquery时动态删除文本框

2 个答案: