Resolved: Function to remove rows from table not working

Question:

i have a question about my function remove(btn). I can’t quite figure it out why its not working. This function have a button when i click it it is supposed to add it to the remove table and increase the counter, meanwhile decrease the counter from the main table and remove the row from there. Here is my code:

var title = document.getElementById("title");
var author = document.getElementById("author");
var output = document.getElementById("output");

function addToTable() {
  var radio = document.getElementsByName("content");
  var radio_selected;
  for (var a = 0; a < radio.length; a++) {
    if (radio[a].checked) {
      radio_selected = radio[a].value;
    }
  }
  output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" +
    "<td>" + author.value + "</td>" +
    "<td>" + radio_selected + "</td>" +
    "<td>" + "<input type='button' onclick='post(this);' value ='Post'>" +
    "<input type='button' onclick='remove(this);' value ='Remove'>" + "</td>" + "</tr>"
}

function counter() {
  var brojac = document.getElementById("counterForElements");
  brojac.innerHTML = parseInt(brojac.innerHTML) + 1;
}

function remove(btn) {
  var row = btn.parentNode.parentNode;
  var removed = document.getElementById("removed");
  removed.append(row);
  row.parentNode.removeChild(row);
  var brojac = document.getElementById("counterForElements"); //counter
  brojac.innerHTML = parseInt(brojac.innerHTML) - 1; //counter
}

function post(btn) {
  var row = btn.parentNode;
  row.parentNode.style.backgroundColor = "Green";
  btn.setAttribute("disabled", "true");
  btn.parentNode.lastElementChild.setAttribute("disabled", "true");
}

label {
  width: 100px;
  display: inline-block;
}

table,
th,
td,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

table td {
  text-align: center;
}

<div>
  <div>
    <label for="Title">Title</label>
    <input type="text" id="title">
  </div>
  <div>
    <label for="Author">Author</label>
    <input type="text" id="author">
  </div>
  <div>
    <label for="content" id="contentlabel">Content type</label>
    <input type="radio" name="content" value="Free" class="content">Free
    <input type="radio" name="content" value="Paid" class="content">Paid
  </div>
</div>
<div>
  <input type="button" value="Add" onclick="addToTable(); counter();">
</div>
<div>
  <table>
    <thead>
      <th style="width:40%;">Title</th>
      <th style="width:40%;">Author</th>
      <th style="width:10%;">Type</th>
      <th style="width:10%;">Button</th>
    </thead>
    <tbody id="output">

    </tbody>
  </table>
</div>
<div>
  <h1>Number of elements: <span id="counterForElements">0</span></h1>
  <h1>Removed elements</h1>
  <table id="removed">

  </table>
</div>

Answer:

Your append is moving the row which means this will DELETE the row regardless of which table it is in: row.parentNode.removeChild(row);
I strongly recommend counting the actual rows
Also delegating (eventListener on the tbody) makes the code simpler and allows us to remove the inline event handlers.
Lastly an array to keep the data in and a map to render it

const titleField = document.getElementById("title");
const authorField = document.getElementById("author");
const output = document.getElementById("output");
const add = document.getElementById("add");
const brojac = document.getElementById("counterForElements");
const removed = document.getElementById("removed");
const arr = [];
const counter = () => brojac.textContent = output.querySelectorAll("tr").length;
const render = () => output.innerHTML = arr
  .map(({ title, author, paymentType },i) => `<tr data-idx="${i}">
     <td>${title}</td>   
     <td>${author}</td>
     <td>${paymentType}</td>
     <td><input type="button" class="post" value="Post" />
     <input type="button" class="remove" value="Remove"></td>
   </tr>`).join("");


const addToTable = () => {
  const paymentType = document.querySelector("[name=content]:checked")?.value ?? "";
  const author = authorField.value
  const title = titleField.value
  arr.push({ author, title, paymentType })
  render()
  counter();
};

output.addEventListener("click", e => {
  const tgt = e.target;
  if (tgt.matches(".remove")) {
    const row = tgt.closest("tr");
    arr.splice(+row.dataset.idx,1); // removing the element from the array at index    
    removed.append(row);
    counter(); // count what's left
  } else if (tgt.matches(".post")) {
    var row = tgt.closest("tr");
    row.style.backgroundColor = "Green";
    tgt.setAttribute("disabled", "true");
    tgt.nextElementSibling.setAttribute("disabled", "true");
  }
})

add.addEventListener("click", addToTable)

label {
  width: 100px;
  display: inline-block;
}

table,
th,
td,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

table td {
  text-align: center;
}

<div>
  <div>
    <label for="Title">Title</label>
    <input type="text" id="title">
  </div>
  <div>
    <label for="Author">Author</label>
    <input type="text" id="author">
  </div>
  <div>
    <label for="content" id="contentlabel">Content type</label>
    <input type="radio" name="content" value="Free" class="content">Free
    <input type="radio" name="content" value="Paid" class="content">Paid
  </div>
</div>
<div>
  <input type="button" value="Add" id="add" />
</div>
<div>
  <table>
    <thead>
      <th style="width:40%;">Title</th>
      <th style="width:40%;">Author</th>
      <th style="width:10%;">Type</th>
      <th style="width:10%;">Button</th>
    </thead>
    <tbody id="output">

    </tbody>
  </table>
</div>
<div>
  <h1>Number of elements: <span id="counterForElements">0</span></h1>
  <h1>Removed elements</h1>
  <table id="removed">

  </table>
</div>

If you have better answer, please add a comment about this, thank you!

Resolved: Function to remove rows from table not working

Resolved: How to make statement case insensitive when uploading a dta file with specified columns?

Resolved: Sort dataframe columns value by close it to another column

Resolved: PostgreSQL resample 1 minute OHLCV candle data into 5 minute OHLCV candle data

Leave A Reply