title: How can I make an element re-appear?
body: <p>I've build a simple Expense Tracker that contains 3 inputs</p>
  <p><strong>Name input</strong></p>
  <p><strong>Date input</strong></p>
  <p><strong>Amount input</strong></p>
  <p>After the user fills these 3 inputs, they can click a button to add the expense into a table and store it there. If they want to remove an expense from the table, they can click the &quot;<strong>REMOVE ENTRY</strong>&quot; button.</p>
  <p><a href="https://i.stack.imgur.com/2ZaQa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ZaQa.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/yUDCu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yUDCu.png" alt="enter image description here" /></a></p>
  <p>If the table is empty, the &quot;<strong>No expenses added yet!</strong>&quot; <code>tr</code> element is shown. Once an expense gets added, the <code>tr</code> element with the message disappears. However, if I add an expense to the table and then remove it, the <code>tr</code> element with the message no longer appears. Is there any way how I can make it re-appear again?</p>
  <p><a href="https://i.stack.imgur.com/YV8bb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YV8bb.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let nameInput = document.querySelector(".name");
  let dateInput = document.querySelector(".date");
  let amountInput = document.querySelector(".amount");
  
  let button = document.querySelector(".add-btn");
  let ifEmpty = document.querySelector(".if-empty");
  let table = document.querySelector("table");
  
  button.addEventListener("click", function() {
      ifEmpty.remove();
      
      // CREATE THE EXPENSE
      let holder = document.createElement("tr");
      let row = document.createElement("td");
      let btnRow = document.createElement("td");
      let removeButton = document.createElement("button");
  
      table.appendChild(holder);
      holder.appendChild(row).textContent = nameInput.value;
      holder.appendChild(row.cloneNode(true)).textContent = dateInput.value;
      holder.appendChild(row.cloneNode(true)).textContent = amountInput.value;
      holder.appendChild(btnRow);
      btnRow.appendChild(removeButton).textContent = "REMOVE ENTRY";
  
      // REMOVE THE EXPENSE
      removeButton.addEventListener("click", function() {
          holder.remove();
      });
  
      /* TRIED THIS TO MAKE THE ELEMENT RE-APPEAR IF THE TABLE IS EMPTY BUT                      
      IT DIDN'T WORK */
  
      if (!table.contains(holder)) {
         table.appendChild(ifEmpty);
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      text-align: center;
  }
  
  h1 {
      font-size: 3.5em;
  }
  
  h2 {
      font-size: 2em;
      margin-bottom: 0.5em;
      color: green;
  }
  
  span {
      font-size: 1.4em;
  }
  
  .date-amount-input {
      margin-top: 0.5em;
  }
  
  input {
      height: 28px;
  }
  
  .name {
      padding-right: 5em;
  }
  
  .amount {
      padding-right: 15.35em;
  }
  
  .amount-text {
      margin-left: 0.4em;
  }
  
  .date {
      padding-right: 18.8em;
      
  }
  
  .add-btn {
      margin-top: 0.9em;
      padding: 0.6em;
      font-size: 1.1em;
      background: green;
      color: white;
      border: none;
      border-radius: 5px;
  }
  
  .add-btn:hover, .add-btn:focus {
      cursor: pointer;
      background: rgb(3, 177, 3);
  }
  
  table {
      margin: 0 auto;
      margin-top: 2em;
      width: 50%;
      height: 80px;
  }
  
  tr {
      height: 40px;
  }
  
  table, th, td{
      border: 1px solid rgba(0, 0, 0, 0.103);
      border-collapse: collapse;
  }
  
  .empty-text {
      font-size: 0.93em;
  }
  
  .if-empty {
      background: rgba(0, 0, 0, 0.055);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="container"&gt;
          &lt;h1&gt;Expense Tracker&lt;/h1&gt;
          &lt;h2&gt;Add A New Item&lt;/h2&gt;
          &lt;div class="name-input"&gt;
              &lt;span class="name-text"&gt;Name: &lt;/span&gt;
              &lt;input type="text" class="name" placeholder="Where was the expense made" size="117"&gt;
          &lt;/div&gt;
          &lt;div class="date-amount-input"&gt;
              &lt;span&gt;Date: &lt;/span&gt;
              &lt;input class="date" type="date"&gt;
              &lt;span class="amount-text"&gt;Amount: &lt;/span&gt;
              &lt;input class="amount" type="text"&gt;
          &lt;/div&gt;
          &lt;button class="add-btn"&gt;Add Expense&lt;/button&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Amount&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr class="if-empty"&gt;
                  &lt;td colspan = "4"&gt;
                      &lt;span  class="empty-text"&gt;No expenses added yet!&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am still a beginner in JS, so any tips will be aprecitated.</p>