Jquery: how do I remove the parent of an empty div?

Hi,

I have  a piece of HTML code that looks like this:

<div class="row">
	<div class="col-lg-12 col-sm-12 col-xs-12">
	<div style="width:1170px;height:600px" class="ecslideshow rtl">
	<div id="ecslideshow0" class="camera_wrap camera_azure_skin" style="display: block; margin-bottom: 0px;"><div class="camera_fakehover"><div class="camera_src camerasliding">
		
	</div><div class="camera_target"><div class="cameraCont"><div class="cameraSlide cameraSlide_0" style="visibility: hidden;"><img src="undefined?1433001897972" class="imgLoaded" style="visibility: hidden;"><div class="camerarelative"></div></div></div></div><div class="camera_overlayer"></div><div class="camera_target_content"><div class="cameraContents"></div></div><div class="camera_pie"><canvas id="pie_0" width="38" height="38" style="position: absolute; z-index: 1002; right: 0px; top: 0px; display: block;"></canvas></div><div class="camera_commands" style="opacity: 0;"><div class="camera_play" style="display: none;"></div><div class="camera_stop" style="display: block;"></div></div><div class="camera_prev" style="opacity: 0;"><span></span></div><div class="camera_next" style="opacity: 0;"><span></span></div></div><div class="camera_pag"><ul class="camera_pag_ul"></ul></div><div class="camera_loader"></div></div>
	<br class="clear clr">
</div>
<style type="text/css">
				.camera_wrap.camera_azure_skin {
    height: 600px !important;
}
</style>

 <script type="text/javascript">
           function  loadSlideshow0(){
    			jQuery('#ecslideshow0').camera({
				thumbnails: false,
				alignment: 'center',
				autoAdvance: true,
				mobileAutoAdvance: true,
				barDirection: 'leftToRight',
				barPosition: 'bottom',
				cols: 6,
				easing: 'easeInOutExpo',
				fx: 'random',
				gridDifference: 250,
				imagePath: 'catalog/view/javascript/ecslideshow/',
				height: '50%',
				hover: true,
				loader: 'pie',
				loaderColor: '#eeeeee',
				loaderBgColor: '#222222',
				loaderOpacity: .8,
				minHeight: '200px',
				navigation: true,
				navigationHover: true,
				overlayer: true,
				pagination: true,
				playPause: true,
				pieDiameter: 38,
				piePosition: 'rightTop',
				rows: 4,
				slicedCols: 12,
				slicedRows: 8,
				slideOn: 'random',
				thumbnails: false,
				time: 7000,
				transPeriod: 1500			});
};
	</script>
<script type="text/javascript">
	jQuery(function(){
		loadSlideshow0();
	});
</script>		<!--<div class="vendor-banner">
			<img src="catalog/view/theme/mission/images/vendor-ban.png"/>
		</div>-->
	</div>
</div>

Select allOpen in new window

It contains a div <div class="cameraContents"></div>

If this div is empty, I'd like to remove the top level parent div.row

I have tried in the following way without success:

  jQuery( document ).ready(function() {
    if( !jQuery.trim( jQuery('.cameraContents').html() ).length ) {
      jQuery(this).closest('div.row').remove()
    }
  });

Select allOpen in new window

Could anyone please help?

thanks in advance