如何使用JQuery刪除克隆的HTML元素？
[英]How do I delete a cloned HTML element with JQuery?
問題描述
幾天前，我提出了一個有關克隆HTML元素的問題。 我可以使用JQuery函數，但是如果用戶需要，我也希望刪除element（在這種情況下為textarea）。 我試圖從網上合法地竊取幾種解決方案，但是我無法使它起作用。 我確定我做錯了什么。 請看一下這段代碼，以嘗試幫助我了解到底什么是不正確的。
HTML
<body>
#parse("inc/Demo.html")
<div id="parent" class="no-print">
<div id="content">
<form>
<br>
<div id ="div_Upper">
<a href="?add_item=true" class="button_Upper green square">Email Form</a>
<a href="?add_item=true" class="button_Upper green square">Save Form</a>
<a href="?add_item=true" class="button_Upper green square">Change Form</a>
<a href="?add_item=true" class="button_Upper green square">new</a>
<a href="http://localhost:8080/servoy-service/velocity/testportaal/Algemeneinformatie.html" type ="button" class ="button_Upper green square">Portal</a>
</div>
<div id="div_Form">
<div>
<div name="question" id="form_List">
<br>
<input autofocus name="title" type="text"
id="title" value="Titel" onfocus="
if(this.value==this.defaultValue)this.value='';" onblur="
if(this.value=='')this.value=this.defaultValue;"/>
</div>
</div>
<div>
<div id="form_Content">
<br>
<textarea name="Content[]" type="text" id="Content[]"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;">
</textarea>
</div>
<button id="AddTextarea">Add</button><button id="remove">Remove</button>
</div>
</div>
<div id="div_Form2">
<div id="buttons_Save_Delete_Edit">
<a href="?add_item=true"class="button_Edit_Save_Delete red square" type="button">Delete</a>
<a href="?add_item=true" class="button_Edit_Save_Delete green square" type="button">Save</a>
<a href="?add_item=true" class="button_Edit_Save_Delete green square" type="button">Edit</a>
</div>
<div>
<label>Question type</label>
<div id="form_list">
<select id="Select">
<option value="Text">Text</option>
<option value="Date">Date</option>
<option value="Scale">Scale</option>
<option value="Tekstarea">Textarea</option>
<option value="Checkboxes">Checkboxes</option>
<option value="multiple_Choice">Multiple-Choice</option>
<option value="Choose from a list">Choose from a list</option>
onder require>masker dd,mm,jjjj
</select>
</div>
</div>
<div>
<div id="form_List">
<label>Mask</label>
<div id="form_list">
<select id="Select" >
<option value="date">{Date}DD-MM-JJJJ</option>
<option value="mobile_number">{M-nummer}__-________</option>
<option value="house_number">{H-nummer}___-_______</option>
<option value="ponskaart nummer">Ponskaart nummer</option>
<option value="klanten nummer">Klanten nummer</option>
</select>
</div>
</div>
</div>
<div>
<div id="form_List">
<label>Question title</label>
<input type="text" name="Vraag Titel" id="list" value="..." onfocus="
if(this.value==this.defaultValue)this.value='';" onblur="
if(this.value=='')this.value=this.defaultValue;"/>
</div>
</div>
<div>
<div id="form_List">
<label>Help text</label>
<input type="text" name="Help_tekst" id="list" value="..." onfocus="
if(this.value==this.defaultValue)this.value='';" onblur="
if(this.value=='')this.value=this.defaultValue;"/>
</div>
</div>
<div>
<div id="form_List">
<label>Required</label>
<div id="form_list">
<input id="checkboxes"type="checkbox" name="Required" value="Required"/>
</div>
</div>
</div>
#parse("Form/Textarea.html")
<div>
<div id="button_Add_Question">
<a href="?add_item=true" class="Add_Question green square" onclick="">+</a>
</div>
</div>
<div >
<button id="Button_Done" class="buttons_Done green square" type="submit">Done</button>
</div>
</div>
<div>
<button id="button_Complete" class="buttons_Complete_Add green square" type="submit">Complete form</button>
</div>
</form>
</div>
#parse("inc/footer.html")
</div>
</body>
JS
$(document).ready(function() {
$('#AddTextarea').click(function() {
$clone=$('textarea[name="Content[]"]:first').clone();
console.log($clone);
$('#form_Content').append($clone);
return false;
});
$("#remove").click(function(e) {
$(this).closest('textarea[name="Content[]"]:first').remove();
e.preventDefault();
});
});
以及指向JSFiddle的鏈接： JSFiddle
2 個解決方案
解決方案1
2 已采納 2013-10-17 13:56:46
問題在於：
$(this).closest('textarea[name="Content[]"]:first').remove();
替換為：
$('textarea[name="Content[]"]:last').remove();
這樣，它將刪除最后添加的文本區域。
來自jQuery文檔： （ http://api.jquery.com/closest/ ）
給定一個表示一組DOM元素的jQuery對象，.closest（）方法將在DOM樹中搜索這些元素及其祖先，並從匹配的元素構造一個新的jQuery對象。
在您的情況下，它搜索this ，因此無法在集合中或在“刪除”按鈕的祖先中找到文本區域。
更新的小提琴： http : //jsfiddle.net/hcJGk/9/
解決方案2
0 2013-10-17 13:56:54
JSFiddle： http : //jsfiddle.net/hcJGk/11/
$(document).ready(function() {
$('#AddTextarea').click(
function() {
$clone=$('textarea[name="Content"]:first').clone();
console.log($clone);
$('#form_Content').append($clone);
return false;
});
$("#remove").click(function(e) {
$(this).closest('div').find('textarea[name="Content"]:last').remove();
e.preventDefault();
});
});
您的示例有幾個問題。 不要使用“ Content []”之類的名稱，也不要期望重復的ID在所有瀏覽器上都能正常工作（將id轉儲到textArea上）。
您還應用了closest button並期望找到textarea ，但是closest僅在元素的父元素上進行搜索。
我更改了示例以找到父DIV，然后刪除最后一個文本區域，以便可以在同一頁面上使用多個文本區域。
如何使用原始畫布的上下文和數據更新克隆的HTML畫布元素？
[英]How do I update a cloned HTML canvas element with the context and data of the original canvas?
如何使用循環在單擊時將克隆的html元素附加到父元素？
[英]How do I append cloned html elements to parent element on click using a loop?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.