Remove inner divs from a parent div using jquery...

Question

Consider my parent div is parentDiv and it contains five child divs

<div id="parentDiv">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
</div>

How to empty the child elements parentDiv using jquery....

EDIT:

What is the diff between empty() and remove()? what should i use?

Answer 1

$("#parentDiv").empty(); from here

Answer 2

empty() removes all the child nodes of the matched selector, whereas remove() removes the matched selector.

Answer 3

Have you tried $("#parentDiv div").remove() or $("#parentDiv").empty() ?

Answer 4

remove removes the element itself from the DOM (in this case #parentDiv) whereas empty is equivilent to calling $('#parentDiv').children().remove(); and removes all of the elements children.

In this case you should use empty:

$('#parentDiv').empty()

Answer 5

.empty() removes all of the children of the selected element(s); .remove() removes the selected element(s) themselves as well as any children.

Thus, $("#parentdiv").empty(); makes the most sense here, because you want to remove the children but not the parent div.