What does {tag_image_value} from webapps return when field is empty? How to use javascript to remove div when condition is met.

Question

Dear all,
As stated in the question, what does {tag_image_value} from webapps return when no image has been uploaded by users. I understand that there is an OnError function that can be called if there isn't any image. However it does not do so.
I am creating a program which will check to see if {tag_image_value} contains an image. If it does not, the error will call an external javascript to remove the div such that it removes any subsequent codes in the later parts of the codes. Below is part of the program:
I have tried to compare the value to NULL, 0, -1 and "" using if-else functions but they do not work. The slideshow wrapper is part of the code from the following theme: 2027 E Colfax Ave Denver
The theme will cycle through the pictures, my purpose is to remove the pictures if the images are not present.
   <!------------------------------------------------ Remove picture if not uploaded ------------------------------------------------>
<script language="JavaScript">
function noimg1() {
     $( "#shownpicture1" ).remove();
     return;
function noimg2() {
     $( "#shownpicture2" ).remove();
     return;
function noimg3() {
     $( "#shownpicture3" ).remove();
     return;
function noimg4() {
     $( "#shownpicture4" ).remove();
     return;
</script>
        <!------------------------------------------------ End of remove picture if not uploaded ------------------------------------------------>
<div class="slideshow-wrapper slider">
<div class="preloader"></div>
<ul data-orbit="data-orbit" data-options="bullets:false;animation:fade;">
    <div style="display: block;" id="shownpicture1">
    <li class="active" style="z-index: 4; margin-left: 0%; opacity: 1;"><img alt="{tag_name_nolink}" onerror="noimg1()" src="{tag_image 1_value}" /></li>
    </div>
    <div style="display: block;" id="shownpicture2">
    <li style="z-index: 2; margin-left: 100%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg2()" src="{tag_image 2_value}" /></li>
    </div>
    <div style="display: block;" id="shownpicture3">
    <li style="z-index: 2; margin-left: 0%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg3()" src="{tag_image 3_value}" /></li>
    </div>
    <div style="display: block;" id="shownpicture4">
    <li style="z-index: 2; margin-left: 0%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg4()" src="{tag_image 4_value}" /></li>
    </div>
</ul>
</div>
<!-- //.slideshow-wrapper -->

Answer 1

When I put in the code it doesnt work. I went into the page to check and it seems that the preloader changes some elements of the code :
<div class="slideshow-wrapper slider">
    <div class="preloader"></div>
    <div class="orbit-container">
        <ul class="orbit-slides-container" data-orbit="data-orbit" data-options="bullets:false;animation:fade;" style="height: 26px;">
            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;">
                <img alt="{tag_name_nolink}" onerror="noimg1()" src="">
                </img>
            </li>
            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;">
                <img alt="{tag_name_nolink}" onerror="noimg2()" src=""></img>
            </li>
            <li class="active" style="z-index: 4; margin-left: 0%; opacity: 1;">
                <img alt="{tag_name_nolink}" onerror="noimg3()" src=""></img>
            </li>
            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;"></li>
        </ul>
        <a class="orbit-prev">
            <span></span>
        </a>
        <a class="orbit-next">
            <span></span>
        </a>
        <div class="orbit-timer paused">
            <span></span>
            <div class="orbit-progress" style="width: 0%;"></div>
        </div>
        <div class="orbit-slide-number">
            <span></span>
             of
            <span></span>
        </div>
    </div>
</div>
I tried putting this into the top of my template layout before the code starts:
<script>
$('.slideshow-wrapper slider .orbit-container ul li img').each(function(){
if( $(this).attr('src') == "" ){
$(this).parent.remove();
$('.slideshow-wrapper slider ul li img').each(function(){ 
  if( $(this).attr('src') === '' ){ 
  $(this).parent.remove(); 
$('.slideshow-wrapper slider ul li img').each(function(){ 
  if( $(this).attr('src') == '' ){ 
  $(this).parent.remove(); 
</script>
All 3 variants cannot work. Is there something wrong with the way I do the scripting?