0

我有一个表单，用户可以在其中单击特定链接并动态添加文本框。我希望能够建立一个删除链接来删除一个特定的文本框，如果不需要，它是由用户动态添加的。当前，如果用户将其留空，则不使用文本框。我的 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，所以我不完全确定如何去做。

4

2 回答 2

1

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

于 2013-05-09T10:08:56.837 回答
1

我不太确定您的 HTML 标记，可能是因为它在 ColdFusion 中，但您可以执行以下操作来删除动态添加的文本框：

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

完整演示在这里

于 2013-05-09T10:15:52.060 回答