點擊動態刪除文本框（ColdFusion）jquery

我有一個表單，用戶可以點擊一個特定的鏈接並動態添加文本框。我希望能夠建立一個刪除鏈接來刪除用戶動態添加的特定文本框（如果不是必需的話）。目前，如果用戶將其留空，則不使用文本框。我的HTML看起來象下面這樣：點擊動態刪除文本框（ColdFusion）jquery

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

我不知道，如果刪除（）是在JQuery中的方法，這將消除任何動態添加元素。我從來沒有使用JQuery，所以我不完全確定如何去做這件事。

來源

2013-05-09 amsko

我不是很肯定你的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

來源

2013-05-09 10:15:52

感謝這有助於 – amsko 2013-05-10 10:22:44

高興它幫助！ – 2013-05-10 10:24:48

是的，您可以使用jquery的remove（）方法刪除任何動態添加的元素，只要提供了您必須具有該元素的id或DOM引用。在你的情況下，將刪除鏈接也包含在你的文本框所在的同一容器DIV中，並啓動一個調用以在該鏈接的onclick事件上引用自身。例如：Onclick =「function_name（this）」並且在函數中，您可以使用jquerys另一種方法（如$（this）.parent（））訪問父容器。您可以使用$（this）.parent（）。remove（）方法刪除動態添加的元素。希望這會幫助你找到解決問題的辦法。

來源

2013-05-09 10:08:56 Robin

點擊動態刪除文本框（ColdFusion）jquery

回答

相關問題