几天前，我提出了一个关于克隆HTML元素的问题。我得到了JQuery函数，但是我也喜欢在用户需要的时候删除元素（在这种情况下是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
答案 0 :(得分：2)
问题在于：
$(this).closest('textarea[name="Content[]"]:first').remove();
将其替换为：
$('textarea[name="Content[]"]:last').remove();
这样它将删除最后添加的textarea。
来自jQuery docs：（http://api.jquery.com/closest/）
给定一个表示一组DOM元素的jQuery对象， .closest（）方法搜索这些元素及其祖先 在DOM树中，从匹配中构造一个新的jQuery对象 元件。
在您的情况下，它会搜索this，因此无法在删除按钮的集合或祖先中找到textarea。
更新了小提琴：http://jsfiddle.net/hcJGk/9/
答案 1 :(得分：0)
$(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，然后删除最后一个textarea，以便您可以在同一页面上拥有这些文件的倍数。