Array value isn't removed when deleting HTML table row

Question

I have a HTML template that lets the user add rows to a table. But when I delete a specific row from the table, and I click on the welcome to our website button, it still shows the deleted records in the array variable. How can I make it to also delete the array entry that corresponds to the delete-action, so the array corresponds to what is being shown in the table?

As you can see in this image, I added two records which are "Subject,Contain,1" and "Subject,Contain,2":

But whenever I delete the first record, which is "Subject,Contain,1", the array is still showing that record:

//add tablebox
$(document).ready(function() {
  $(".button").on("click", function() {
    para = document.getElementById("Parameter").value;
    condi = document.getElementById("Condition").value;
    value2match = document.getElementById("valuetomatch").value;

    if (para && condi && value2match !== null) {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);

      cell1.innerHTML = document.getElementById("Parameter").value;
      cell2.innerHTML = document.getElementById("Condition").value;
      cell3.innerHTML = document.getElementById("valuetomatch").value;
      cell4.innerHTML =
        '<button  class = "del_img "onClick="delSpec(this)"><img src="deleteimg.png" width="30" height="30"></button> </div>';

      var myTab = document.getElementById("myTable");
      var tableData = [];

      // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
      for (i = 1; i < myTab.rows.length; i++) {
        // GET THE CELLS COLLECTION OF THE CURRENT ROW.
        var objCells = myTab.rows.item(i).cells;

        // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
        for (var j = 0; j < 3; j++) {
          tableData.push(objCells.item(j).innerHTML);
        }
      }

      document.getElementById("buttonSubmit").onclick = function() {
        alert(tableData);
      };
      //close the modal
      modal.style.display = "none";
    } else {
      alert("All the input box cannot be empty!");
    }
  });
});

function delSpec(node) {
  r = node.parentNode.parentNode;
  r.parentNode.removeChild(r);
}

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
};

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

.buttonSubmit {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.del_img {
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

body {
  font-family: "Quicksand", sans-serif;
}

.button {
  border-radius: 50px;
  background-color: #ff9633;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  width: 80px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  margin-left: 500px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 45%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}


/* The Close Button */

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #ff9633;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #ff9633;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ff9633;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #fa7d34;
}

<link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</style>
<ul>
  <li>
    <div id="myBtn1"><a href="#AddCon">Alert Policies</a></div>
  </li>
  <li><a href="#contact">Test3</a></li>
  <li><a href="#about">Test4</a></li>
</ul>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Alert Policies</h2>
    </div>
    <div class="modal-body">
      <p style="font-size: 14px">
        Please select an event parameter as well as the condition type and value that apply.
      </p>

      <!-- parameter drop down -->
      <form method="post">
        <label for="Parameter">
          <b style="font-size: 13px">
            Event parameter to evaluate
          </b></label
        >
        <select
          name="Parameter"
          id="Parameter"
          style="width: 340px; font-family: 'Quicksand', sans-serif"
        >
          <option disabled selected value>select a parameter</option>
          <option value="Subject">Subject</option>
          <option value="Text">Text</option>
        </select>
        <br /><br />

        <label for="Condition">
          <b style="font-size: 13px"> Type of condition </b></label
        >
        <select
          name="Condition"
          id="Condition"
          style="
            width: 340px;
            margin-left: 69px;
            font-family: 'Quicksand', sans-serif;
          "
        >
          <option disabled selected value>select a condition</option>
          <option value="Equals">Equals</option>
          <option value="Contain">Contain</option>
          <option value="NotContain">Does not contain</option>
        </select>
        <br /><br />

        <label for="valuetomatch">
          <b style="font-size: 13px"> Value to match</b></label
        >
        <input
          type="text"
          id="valuetomatch"
          name="valuetomatch"
          style="
            width: 333px;
            margin-left: 80px;
            font-family: 'Quicksand', sans-serif;
          "
        />
        <br />
        <br />
      </form>
      <button class="button"><span>OK</span></button>
    </div>
  </div>
</div>
<table id="myTable">
  <tr>
    <th>Event Parameter</th>
    <th>Condition</th>
    <th>Value to match</th>
    <th>Action</th>
  </tr>
</table>
<br />

<button id="buttonSubmit">Welcome to our website</button>

Answer 1

It is no surprise that tableData also contains the deleted items, as you never delete anything from tableData. The only thing your code does with tableData is calling .push.

You will need to delete the item from tableData at the moment the user performs the delete action. So extend your delSpec function as follows:

function delSpec(node) {
  // Always declare your variables! Use `let` or `const` or `var`:
  let r = node.parentNode.parentNode;
  // Remove the row from the array:
  tableData.splice(r.rowIndex - 1, 1);
  // Remove the row from the HTML table:
  r.parentNode.removeChild(r);
}

As the rowIndex also takes the header row into account (which is not represented in tableData), the above code needs to subtract 1 from rowIndex.

You have some other errors that need to be corrected for the above to work:

• tableData should be a global variable so it is accessible in the different handlers

• tableData should then only get the new row added to it.

• The submit click handler should not be defined in the other handler, but outside of it.

Here is the corrected code:

//declare the array as a global
var tableData = [];
$(document).ready(function () {
  $(".button").on("click", function () {
    para = document.getElementById("Parameter").value;
    condi = document.getElementById("Condition").value;
    value2match = document.getElementById("valuetomatch").value;

    if (para && condi && value2match !== null) {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);

      cell1.innerHTML = document.getElementById("Parameter").value;
      cell2.innerHTML = document.getElementById("Condition").value;
      cell3.innerHTML = document.getElementById("valuetomatch").value;
      cell4.innerHTML =
        '<button  class = "del_img "onClick="delSpec(this)"><img src="deleteimg.png" width="30" height="30"></button> </div>';

      var myTab = document.getElementById("myTable");

      // Only add the new row:
      tableData.push([
        document.getElementById("Parameter").value,
        document.getElementById("Condition").value,
        document.getElementById("valuetomatch").value
      ]);

      modal.style.display = "none";
    } else {
      alert("All the input box cannot be empty!");
    }
  });
  // Move click handler outside of the other handler
  $("#buttonSubmit").onclick = function () {
    alert(tableData);
  };
});

function delSpec(node) {
  let r = node.parentNode.parentNode;
  tableData.splice(r.rowIndex - 1, 1);
  r.parentNode.removeChild(r);
}