Append inside append
Posted: Thu Apr 07, 2011 11:50 pm
I've got a div (mainDiv) that gets appended with a click of button. This 'mainDiv' consists of another div (insideDiv) that needs to be appended inside the 'mainDiv'. In other words, I am trying to append a div which is inside already appended div.
Hope I am clear.
Definitely I am doing something wrong that it's not working. Will much appreciate to know what am I doing wrong here.
HTML form:
jQuery to add INSIDE DIV:
jQuery to add MAIN DIV:
jQuery to remove div:
Hope I am clear.
Definitely I am doing something wrong that it's not working. Will much appreciate to know what am I doing wrong here.
HTML form:
Code: Select all
<div class="mainDiv">
<div class="insideDiv">
Inspected Level
<select name="locationId[]">
// using php code here to get the option values
</select>
<input type="button" class="addInsideDiv" value="+" />
</div>
<input type="button" id="addMainDiv" value="[ Add ]" />
</div>Code: Select all
$(".addInsideDiv").click(function() {
$(".insideDiv").append(
"<div>Inspected Level "
+"<select name=\"locationId[]\">"
// using php code here to get the option values
+"</select> "
+"<input type=\"button\" class=\"removeThis\" value=\"-\" />"
+"</div>"
);
});Code: Select all
$("#addMainDiv").click(function() {
$(".mainDiv").append(
"<div>"
+"<button class=\"removeThis\">X</button>"
+"<div class=\"insideDiv\">"
+"Inspected Level "
+"<select name=\"locationId[]\">"
// using php code here to get the option values
+"</select>"
+"<input type=\"button\" class=\"addInsideDiv\" value=\"+\" />"
+"</div>"
+"</div>"
);
});Code: Select all
$('.removeThis').live('click', function() {
$(this).parent().remove();
return false;
});