How do I delete a cloned HTML element with JQuery?
Question
A couple of days ago I had placed a question regarding the cloning of an HTML element. 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. 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
<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();
});
});
And also a link to the JSFiddle : JSFiddle
2 answers
solution1
2 ACCPTED 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/ )
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.
Updated fiddle: http://jsfiddle.net/hcJGk/9/
solution2
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();
});
});
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).
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.