删除 HTML 表行时未删除数组值

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);
}