CODEWITHSUNDEEP
javascripthtmlhtml-table
Protium
Protium

Reputation: 213

Having trouble removing rows from a table with JavaScript

I have a simple table containing text and inputs. I am trying to determine how many inputs are in the table dynamically by selecting a value from a drop down. This works fine the first time, however when I try to change the value only some of the rows get removed. Here is my code, I have replaced the inputs with the index to more easily see what is going on.

Here is the output, page loadpage load

After 6 elements are selected it still looks fine, showing all the rows that were in the table

6 selected

Here is where it all goes wrong, although the length of the array is output as 11 only 8 rows are output to the console, and half the old rows get left behind in the table.

final

Any help would be very much appreciated, I am completely puzzled by this behavior. EDIT: I have added the HTML and removed a bit of the JS, I honestly don't know what to exclude because I don't know what the problem is..

As requested, here is everything, I don't believe the PHP is required as the problem occurs before the form is posted. Thank you all for having a look.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <h1>Create Questions</h1>
        <form name="create" action="process.php" method="POST">

            <table id = "inputTable">
                <tr><td>ID: </td><td><input id="field" name="id" type="text" /></td></tr>
                <tr><td>Text: </td><td><input id="field" name="txt" type="text" /></td></tr>

                <tr><td>#of choices: </td><td><select id="numberOfChoices" name="numberOfChoices">

                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>

                    </select></td></tr>
                <tr><td>Answer: </td><td><input id="field" name="id" type="text" /></td></tr>
                <tr><td>Points: </td><td><input id="field" name="id" type="number" /></td></tr>
            </table>
            <button type="submit">Submit</button>
        </form>

        <script>

             window.onload = function () {

    document.querySelector("#numberOfChoices").addEventListener("change", addFields);

        };


        function addFields() {

            var letters = ["a", "b", "c", "d", "e", "f"];
            var choices = document.querySelector("#numberOfChoices");
            var choicesValue = choices.value;

            var tab = document.querySelector("#inputTable");

            var rows = tab.rows;
            console.log(rows.length);

            for (var j = 0; j < rows.length; j++) {

                var row = rows[j];

                console.log(row.cells[0].innerHTML);

                for (var k = 0; k < letters.length; k++) {
                    var letter = letters[k];


                    if (row.cells[0].innerHTML === letter)
                    {
                        tab.deleteRow(j);
                        break;
                    }

                }

            }


            for (var i = 0; i < choicesValue; i++) {

                var row = tab.insertRow(3 + i);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);


                cell1.innerHTML = letters[i];
                //cell2.innerHTML = "<input id=\"field\" name=\"id\" type=\"text\" />"
                cell2.innerHTML = i;

            }


        }

    </script>

</body>

Upvotes: 1

Views: 71

Answers (1)

dhilt
dhilt

Reputation: 20744

When you remove some row, the table content is being changed. So removing "a" row leads to reducing table's length by 1 and the next row would be "c", not "b". And that "b" would remain in the output. You will see it after new "a", "b" and "c" will be added to the table. The same is true for "d" (because removing of "c" causes table length reducing by 1) and for "f" (because removing of "e" causes one more table length reducing).

The solution is just to decrement iteration variable after the row is removed:

  for (var j = 0; j < rows.length; j++) {
      row = rows[j];
      console.log(row.cells[0].innerHTML);
      for (var k = 0; k < letters.length; k++) {
          var letter = letters[k];
          if (row.cells[0].innerHTML === letter)
          {
              tab.deleteRow(j);
              j--;
              break;
          }
      }
  }

I also prepared Plunker for you: https://plnkr.co/edit/L7ieHFLGob6ikL5YJsaD?p=preview

Upvotes: 1

Related Questions