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 部分は無視できます。これは、テキスト ボックスが DB の行に従って入力される場合だからです。DB にデータがない場合、テキスト ボックスは 1 つだけ表示され、ユーザーは [ここをクリックして推奨される是正措置をさらに追加] をクリックして、テキスト ボックスをいくつでも追加できます。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)" を使用すると、関数内で $(this).parent() などの別のメソッドで jquerys を使用して親コンテナーにアクセスできます。$(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 に答える