JQuery Empty() On Nested Elements

HTML

<div class="parent">
    <div class="first-child">Some text in the first child
        <div class="first-grandchild">Some text in the first grandchild</div>
    </div>
    <div class="second-child">Some text in the second child</div>
    <button onclick="close()">
    click
    </button>
</div>

JavaScript

$(document).ready(function () {
     // this will remove content of both the first-child and the first-grand-child
     	function close() {
       	$(".first-child").empty();
  	} 
});