How to correctly remove a dynamically created DOM tree element?

Question

JavaScript

The situation is as follows - a placeholder is placed in the bootstrap modal window, into which elements are inserted with the following code:

var mapWrapper = $(document.createElement('div'));
mapWrapper.attr('id', 'modalMapWrapper');
mapWrapper.appendTo('#modalMap');

var embed ="<iframe id='mapFrame' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent(event.location) +"&amp;output=embed'></iframe>";
$('#modalMapWrapper').html(embed);

and then, according to the modal window closing handler, the element is deleted: That is - they created the parent programmatically, injected the iframe into it, opened the modal window, closed the window, caught the event - found the iframe and deleted the parent. On opening the next window, everything was repeated. All this works, of course. Question for Javascript connoisseurs - how correct is this approach?

$('#mapFrame').parent().remove();