title: signature generator - how to remove an element in javascript if two fields are empty
body: <p>I am creating a signature block for my company and testing out the validation.</p>
  
  <ol>
  <li>When only mobile is entered, it works fine</li>
  <li>When only fax is entered, it works fine</li>
  <li>when BOTH mobile and fax are omitted, it for some reason still shows the "C:" and the " | " for mobile phone</li>
  </ol>
  
  <p>Do i need to create an if / then with both?</p>
  
  <p><a href="https://codepen.io/jggrs/pen/RMNVLZ?editors=1100" rel="nofollow noreferrer">https://codepen.io/jggrs/pen/RMNVLZ?editors=1100</a></p>
  
  <pre><code>&lt;html&gt;
  
  
      &lt;head&gt;
      &lt;style&gt;
      #form_box{
      border: 2px solid #2c2c59;
      padding: 20px;
      background-color: #dadada;
        }  
  
      #outgoing{
      border: 1px solid #df4540;
      padding: 20px;
        }
  
      #reply{
      border: 1px solid #df4540;
      padding: 20px;
        }  
      &lt;/style&gt;
  
  
  
  
      &lt;script type="text/JavaScript"&gt;
  
  
      //first and last name validation
  
      function validateForm()
      {  
        var x = document.forms["sigForm"]["flname"].value;
          if (x == "") {
              alert("First &amp; Last Name - Must be Filled Out!");
              return false;
              }
  
      //title validation
          var x = document.forms["sigForm"]["title"].value;
          if (x == "") {
              alert("Title - Must be Filled Out!");
              return false;
          }
  
      //office phone # validation
         var x = document.forms["sigForm"]["office"].value;
          if (x == "") {
              alert("Office Phone # - Must be Filled Out!");
              return false;
          } 
  
      //email validaton 
        var x = document.forms["sigForm"]["email"].value;
          if (x == "") {
              alert("E-mail - Must be Filled Out!");
              return false;
          }
  
  
      //fax check + disappear!
       var x = document.forms["sigForm"]["fax"].value;
            if (x == "") {
              document.getElementById("faxy").remove();
              document.getElementById("pipe2").remove();
              document.getElementById("faxy2").remove();
              document.getElementById("pipe5").remove();
              return false;
          }     
  
      //mobile phone check + disappear!
       var x = document.forms["sigForm"]["mobile"].value;
            if (x == "") {
              document.getElementById("cell").remove();
              document.getElementById("pipe1").remove();
              document.getElementById("cell2").remove();
              document.getElementById("pipe4").remove();
              return false;
          }  
  
  
      //end bracket function  
      } 
  
      //
      function getOption()
  
      {
      //first and last name 
      var firstlast = document.getElementById("firstlast").value;
      var list = [].slice.call(document.getElementsByClassName('display_firstlast'));
      list.forEach(function(item){
      item.innerHTML= firstlast
      });
  
      //title
      var title = document.getElementById("title").value;
      var list = [].slice.call(document.getElementsByClassName('display_title'));
      list.forEach(function(item){
      item.innerHTML= title
      });  
  
  
      //office
      var office = document.getElementById("office").value;
      var list = [].slice.call(document.getElementsByClassName('display_office'));
      list.forEach(function(item){
      item.innerHTML= office
      });  
  
  
      //mobile
      var mobile = document.getElementById("mobile").value;
      var list = [].slice.call(document.getElementsByClassName('display_mobile'));
      list.forEach(function(item){
      item.innerHTML= mobile
      });  
  
  
      //fax
      var fax = document.getElementById("fax").value;
      var list = [].slice.call(document.getElementsByClassName('display_fax'));
      list.forEach(function(item){
      item.innerHTML= fax
      });  
  
      //email
      var email = document.getElementById("email").value;
      var list = [].slice.call(document.getElementsByClassName('display_email'));
      list.forEach(function(item){
      item.innerHTML= email
      });  
  
  
      //addresses dropdown 
  
      var address = document.getElementById("address").value;
      var list = document.getElementsByClassName('display_address');
      var i;
      for (i = 0; i &lt; list.length; i++) {
          list[i].innerHTML = address;
      }
  
  
  
  
  
      }
      &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
  
      &lt;h1 style="font-family: arial;"&gt;Signature Block Generator - Federal Heath&lt;/h1&gt;
  
      How to create your own signature block (must use internet explorer):
      &lt;ol&gt;
        &lt;li&gt;Fill out the form below&lt;/li&gt;
        &lt;li&gt;Copy entire signature&lt;/li&gt;
        &lt;li&gt;Paste into outlook&lt;/li&gt;
        &lt;li&gt;View video on right if you have any issues&lt;/li&gt;
  
  
        &lt;/ol&gt;&lt;br /&gt;
  
      &lt;div style="position: fixed; top: 0px; right: 0px;"&gt; &lt;iframe width="300" height="100" src="https://www.youtube.com/embed/aWlGf0noxOQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt; &lt;br /&gt;&lt;br /&gt;&lt;/div&gt;
  
  
      &lt;div id="form_box"&gt;
      &lt;form onsubmit="return !!(validateForm() &amp; false)" name="sigForm"&gt;
      First and Last Name: &lt;input type="text" name="flname" id = "firstlast"&gt;&lt;br /&gt;&lt;br /&gt;
      Title: &lt;input type="text" name="title" id = "title"&gt;&lt;br /&gt;&lt;br /&gt;
      Office Phone #: &lt;input name="office" type ="text" id ="office"&gt;&lt;br /&gt;&lt;br /&gt;
      Mobile #: &lt;input name="mobile" type ="text" id ="mobile"&gt;&lt;span style="font-style: italic;color: #646464;"&gt; optional&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
      Fax #: &lt;input name="fax" type ="text" id ="fax"&gt;&lt;span style="font-style: italic;color: #646464;"&gt; optional&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
      E-mail: &lt;input name="email" type ="text" id ="email"&gt;&lt;br /&gt;&lt;br /&gt;  
  
  
  
      Address:
      &lt;select id="address" class="address"&gt;
      &lt;option&gt;Select Your Location&lt;/option&gt;
      &lt;option&gt;160 West Carmel Drive, Suite 236 | Carmel, IN 46032&lt;/option&gt;
      &lt;option&gt;198 Haven Lane | Idaho Falls, ID 83404&lt;/option&gt;
      &lt;option&gt;601 Royal Crest Way | Brandon, FL 33511&lt;/option&gt;
      &lt;option&gt;625 Market Street, Suite 600 | Knoxville, TN 37902&lt;/option&gt;
      &lt;option&gt;668 Harris Road | Coldwater, MS 38618&lt;/option&gt;
      &lt;option&gt;1020 Pittsburgh Dr., Suite A | Delaware OH 43015&lt;/option&gt;
      &lt;option&gt;1128 Beville Road, Suite E | Daytona Beach, FL 32114&lt;/option&gt;
      &lt;option&gt;1234 San Francisco | San Antonio, TX 78201&lt;/option&gt;
      &lt;option&gt;1251 Washington Street, Suite 245 | Grafton, WI 53024&lt;/option&gt;
      &lt;option&gt;1500 North Bolton Street | Jacksonville, TX 75766&lt;/option&gt;
      &lt;option&gt;1840 Oakdale Avenue | Racine, WI 53406&lt;/option&gt;
      &lt;option&gt;10425 Old Alabama Road Connector Suite 102 | Alpharetta, GA 30022&lt;/option&gt;
      &lt;option&gt;2300 State Highway 121 | Euless, TX 76039&lt;/option&gt;
      &lt;option&gt;3900 West Dewey Drive | Las Vegas NV 89118&lt;/option&gt;
      &lt;option&gt;3609 Ocean Ranch Blvd., Suite 204 | Oceanside, CA 92056&lt;/option&gt;
      &lt;option&gt;4046 N. Goldenrod Road, #269 | Winter Park FL 62792&lt;/option&gt;
      &lt;option&gt;4602 North Avenue | Oceanside, CA 92056&lt;/option&gt;
      &lt;option&gt;6040 Dutchmans Lane, Suite 300 | Louisville, KY 40205&lt;/option&gt;
      &lt;option&gt;7501 South Quincy Street, Suite #175 | Willowbrook, IL 60527&lt;/option&gt;
      &lt;option&gt;12704 Dupont Circle | Tampa FL 33626&lt;/option&gt;
      &lt;option&gt;15534 West Hardy Road, Suite 200 | Houston, TX 77060&lt;/option&gt;  
      &lt;/select&gt;
  
        &lt;br&gt;&lt;br&gt;
      &lt;input type="submit" onclick="getOption()" value="Make My Signature" &gt;
      &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;br /&gt;
      &lt;br /&gt;
  
      &lt;h2 style="font-family: arial; font-size: 15px;"&gt;OUTGOING SIGNATURE&lt;/h2&gt;  
      &lt;div id="outgoing"&gt;
      &lt;!--OUTGOING EMAIL--&gt;  
  
  
  
      &lt;!--NAME AND TITLE--&gt;
      &lt;span class = "display_firstlast" style="color: #2c2c59; font-weight: bold; font-size: 16.5px;font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
        &lt;span style="color: #2c2c59; font-weight: bold; font-size: 16.5px;font-family: Arial, sans-serif;"&gt; | &lt;/span&gt; 
  
        &lt;span class = "display_title" style="color: #2c2c59; font-weight: bold; font-size: 16.5px;font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
      &lt;br /&gt;
  
  
      &lt;!--OFFICE--&gt;
      &lt;span style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt;O: &lt;/span&gt; 
  
      &lt;!--OFFICE PHONE--&gt;  
      &lt;span class = "display_office" style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
      &lt;!--PIPE--&gt;
      &lt;span id="pipe1" style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt; | &lt;/span&gt;  
  
      &lt;!--CELL PHONE--&gt;
      &lt;span id="cell" style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt;C:&lt;/span&gt;  
  
      &lt;!--MOBILE--&gt;  
      &lt;span class = "display_mobile" style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
      &lt;!--PIPE--&gt;
      &lt;span id="pipe2" style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt; | &lt;/span&gt;  
  
      &lt;!--FAX--&gt;
      &lt;span id="faxy" style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt;Fax: &lt;/span&gt;   
  
      &lt;!--FAX PHONE--&gt;
      &lt;span class = "display_fax" style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
      &lt;!--PIPE--&gt;
      &lt;span style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt; | &lt;/span&gt; 
  
      &lt;!--EMAIL--&gt;
      &lt;span class = "display_email" style="text-decoration: none; color: #2c2c59; font-size: 15px; font-family: Arial, sans-serif;"&gt;&lt;/span&gt;&lt;br /&gt;
  
      &lt;!--&lt;a href="http://www.federalheath.com"&gt;&lt;img src="http://www.federalheath.com/wp-content/uploads/2018/02/natasha_photo_taller.png"&gt;&lt;/a&gt;&lt;br /&gt;--&gt;
  
      &lt;!--JUST LOGO--&gt;
  
      &lt;a href="http://www.federalheath.com"&gt;&lt;img src="http://www.federalheath.com/wp-content/uploads/2018/03/federal_heath.png" alt="Federal Heath"&gt;&lt;/a&gt;&lt;br /&gt;
  
  
  
       &lt;!--ADDRESS--&gt;
      &lt;span class = "display_address" style="color: #848484;font-size: 9px;font-family: Arial, sans-serif; padding-top: 2px;"&gt;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
  
  
  
      &lt;!--LINES OF BUSINESS--&gt;
  
       &lt;a style="text-decoration: none;color: 2c2c59;font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;" href="http://www.federalheath.com/signage"&gt;SIGNAGE&lt;/a&gt;
  
      &lt;!--PIPE--&gt;
      &lt;span style="text-decoration: none; color: #000000; font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;"&gt;|&lt;/span&gt;
  
      &lt;a style="text-decoration: none;font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;" href="http://www.federalheath.com/maintenance/"&gt;MAINTENANCE&lt;/a&gt;
  
      &lt;!--PIPE #2--&gt;
      &lt;span id="pipe2"style="text-decoration: none; color: #000000; font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;"&gt;|&lt;/span&gt;
  
      &lt;a style="text-decoration: none;font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;" href="http://www.federalheath.com/specialty-contracting/"&gt;SPECIALTY CONTRACTING&lt;/a&gt;
  
      &lt;!--PIPE #3--&gt;
      &lt;span id="pipe3" style="text-decoration: none; color: #000000; font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;"&gt;|&lt;/span&gt;
  
      &lt;a style="text-decoration: none;font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;" href="http://www.federalheath.com/digital-signage/"&gt; DIGITAL SIGNAGE&lt;/a&gt;
  
      &lt;!--PIPE #4--&gt;
      &lt;span style="text-decoration: none; color: #000000; font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;"&gt;|&lt;/span&gt;
  
       &lt;a style="text-decoration: none;font-size: 11px;font-family: Arial, sans-serif; margin: 0; padding: 0;" href="http://www.federalheath.com/printed-graphics/"&gt;PRINTED GRAPHICS&lt;/a&gt;&lt;br /&gt;
  
  
      &lt;!--COMPANY SLOAGAN--&gt;
      &lt;span style="font-size: 12px; color: #848484;font-style: italic; font-family: Arial, sans-serif;"&gt;We help businesses connect and engage with their customers.&lt;/span&gt;&lt;br /&gt;&lt;span&gt;&lt;a href="http://www.federalheath.com" style="font-size: 11px;text-decoration: none; font-family: Arial, sans-serif;"&gt;VISIT OUR WEBSITE&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
  
  
  
      &lt;!--REPLY EMAIL--&gt;  
      &lt;h2 style="font-family: arial; font-size: 15px;"&gt;REPLY SIGNATURE&lt;/h2&gt;  
      &lt;div id="reply"&gt; 
  
  
      &lt;!--NAME AND TITLE--&gt;
      &lt;span class = "display_firstlast" style="color: #2c2c59; font-weight: bold; font-size: 14px;font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
        &lt;span style="color: #2c2c59; font-weight: bold; font-size: 14px;font-family: Arial, sans-serif;"&gt; | &lt;/span&gt; 
  
        &lt;span class = "display_title" style="color: #2c2c59; font-weight: bold; font-size: 14px;font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
      &lt;br /&gt;
  
  
      &lt;!--OFFICE--&gt;
      &lt;span style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt;O: &lt;/span&gt; 
  
      &lt;!--OFFICE PHONE--&gt;  
        &lt;span class = "display_office" style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
      &lt;!--PIPE #4--&gt;
      &lt;span id="pipe4" style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt; | &lt;/span&gt;  
  
      &lt;!--CELL PHONE--&gt;
      &lt;span id="cell2" style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt;C:&lt;/span&gt;  
  
      &lt;!--MOBILE--&gt;  
      &lt;span class = "display_mobile" style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt;&lt;/span&gt;
  
      &lt;!--PIPE #2--&gt;
      &lt;span id="pipe5" style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt; | &lt;/span&gt;  
  
      &lt;!--FAX--&gt;
      &lt;span id="faxy2" style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt;Fax: &lt;/span&gt;   
  
      &lt;!--FAX PHONE--&gt;
      &lt;span class = "display_fax" style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt;&lt;/span&gt;&lt;br /&gt;
  
      &lt;!--PIPE #3--&gt;
      &lt;span style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt; | &lt;/span&gt;   
  
      &lt;!--EMAIL--&gt;
      &lt;span class = "display_fax" style="text-decoration: none; color: #2c2c59; font-size: 14px; font-family: Arial, sans-serif;"&gt;&lt;/span&gt;&lt;br /&gt;
  
  
  
       &lt;!--ADDRESS--&gt;
      &lt;span class = "display_address" id="paddress" style="color: #2c2c59;font-size: 12px;font-family: Arial, sans-serif; padding-top: 2px;"&gt;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
  
        &lt;/div&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>