Function to remove rows from table not working-CodePudding

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" >Free
    <input type="radio" name="content" value="Paid" >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>

CodePudding user response：

I've found the mistake, just replace your code by:

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

I removed this statement: row.parentNode.removeChild(row);.

CodePudding user response：

If you would like to have counters for added items & removed items, here is something that you can try - adding an additional span for the removed items so you can see the number

HTML

            <h1>Number of elements: <span id="counterForElements">0</span></h1>
            <h1>Removed elements: <span id="counterForElements1">0</span></h1>

and then

        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");
            var brojac1 = document.getElementById("counterForElements1");//counter
            brojac1.innerHTML = parseInt(brojac1.innerHTML) - 1;//counter
            brojac.innerHTML = parseInt(brojac.innerHTML) - 1;
        }

I think that those were all the changes, you can see what your code looks like with those changes here -

https://codepen.io/esteecodes/pen/xxYBrgL