如何使用JQuery删除克隆的HTML元素？
[英]How do I delete a cloned HTML element with JQuery?
问题描述
A couple of days ago I had placed a question regarding the cloning of an HTML element. 
几天前，我提出了一个有关克隆HTML元素的问题。 I got the JQuery function to work, but I'd also like the element(, in this case a textarea) to be deleted if a user requires it. 我可以使用JQuery函数，但是如果用户需要，我也希望删除element（在这种情况下为textarea）。 I've tried to legally steal several solutions from the net, but I cannot get this to work. 我试图从网上合法地窃取几种解决方案，但是我无法使它起作用。 I'm sure I'm doing something horribly wrong. 我确定我做错了什么。 Please have a look at this bit of code to try and help me get to know what exactly is incorrect. 请看一下这段代码，以尝试帮助我了解到底什么是不正确的。
HTML 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 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();
});
});
And also a link to the JSFiddle : JSFiddle 以及指向JSFiddle的链接： JSFiddle
2 个解决方案
解决方案1
2 已采纳 2013-10-17 13:56:46
The problem lies in the line: 问题在于：
$(this).closest('textarea[name="Content[]"]:first').remove();
replace it with: 替换为：
$('textarea[name="Content[]"]:last').remove();
This way it will remove the last added textarea. 这样，它将删除最后添加的文本区域。
From jQuery docs: ( http://api.jquery.com/closest/ ) 来自jQuery文档： （ http://api.jquery.com/closest/ ）
Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.
In your case, it searches this , and hence is unable to find a textarea in the set or in ancestry of the remove button. 在您的情况下，它搜索this ，因此无法在集合中或在“删除”按钮的祖先中找到文本区域。
Updated fiddle: http://jsfiddle.net/hcJGk/9/ 更新的小提琴： http : //jsfiddle.net/hcJGk/9/
解决方案2
0 2013-10-17 13:56:54
JSFiddle: http://jsfiddle.net/hcJGk/11/ 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();
});
});
There are several problems with your example. 您的示例有几个问题。 Don't use a name like "Content[]" and don't expect duplicated ID's to work on all browsers (dump the id on the textArea). 不要使用“ Content []”之类的名称，也不要期望重复的ID在所有浏览器上都能正常工作（将id转储到textArea上）。
You were also applying closest to the button and expecting to find the textarea , but closest only searches back up the parents of the element. 您还应用了closest button并期望找到textarea ，但是closest仅在元素的父元素上进行搜索。
I changed the example to find the parent DIV then remove the last textarea so that you could have multiples of these on the same page. 我更改了示例以找到父DIV，然后删除最后一个文本区域，以便可以在同一页面上使用多个文本区域。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.