Removing elements from table and adding them to other table-CodePudding

I made this simple webpage that adds elements to table. On every element there is a post and remove button. Ignore post button because that is functioning. How can I make whenever I click on remove button for that specific row to be moved to other table named removed elements and removing them from the main table?

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

function addToTable() {
  output.innerHTML  = "<tr>"   "<td>"   title.value   "</td>"  
    "<td>"   author.value   "</td>"  
    "<td>"   "<input type='button' onclick='post(this);' id='post' value ='Post'>"  
    "<input type='button' onclick='remove(this);' id='remove'value ='Remove'>"   "</td>"   "</tr>"
}

function remove(btn) {
  var row = btn.parentNode.parentNode;
  var removed = document.getElementById("removed");
  removed.innerHTML  = "<div>"   row.parentNode.value   "</div>";
  row.parentNode.removeChild(row);
}

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

<body>
  <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>
  <div>
    <input type="button" value="Add" onclick="addToTable();">
  </div>
  <div>
    <table id="output">
      <th style="width:45%;">Title</th>
      <th style="width:45%;">Author</th>
      <th style="width:10%;">Button</th>
    </table>
  </div>
  <div>
    <h1>Removed elements</h1>
    <table id="removed">

    </table>
  </div>
</body>

CodePudding user response：

I will do that this way...

const
  title     = document.getElementById('title')
, author    = document.getElementById('author')
, btAdd     = document.getElementById('bt-Add')
, T_output     = document.querySelector('#t-output')
, T_output_tb  = document.querySelector('#t-output tbody')
, T_removed    = document.querySelector('#t-removed')
, T_removed_tb = document.querySelector('#t-removed tbody')
  ;
btAdd.onclick = () =>
  {
  let 
    inTittle = title.value.trim()
  , inAuthor = author.value.trim()
    ;
  if ( inTittle !== ''
    && inAuthor !== '' 
    ){
    title.value = ''
    author.value = ''
    title.focus()

    let newRow = T_output_tb.insertRow()
    newRow.insertCell().textContent = inTittle
    newRow.insertCell().textContent = inAuthor
    newRow.insertCell().innerHTML = `<button >Post</button>`
                                    `<button >Remove</button>`
    }
  }
T_output_tb.onclick = e =>
  {
  if (!e.target.matches('button.bt-post, button.bt-remove')) return

  let tRow = e.target.closest('tr')

  if (e.target.matches('button.bt-remove'))
    {
    if (!T_removed.tHead)
      {
      let headRow = T_removed.createTHead().insertRow()
      headRow.appendChild( T_output.querySelector('thead th:nth-child(1)').cloneNode(true) )
      headRow.appendChild( T_output.querySelector('thead th:nth-child(2)').cloneNode(true) )
      }

    tRow.deleteCell(2)
    T_removed.appendChild( tRow)
    }
  if (e.target.matches('button.bt-post'))
    {
    tRow.classList.add('green')
    tRow.querySelectorAll('button').forEach(bt=>bt.disabled = true)
    }
  }

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
label {
  width   : 3em;
  display : inline-block;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em; 
  }
th, td {
  border     : none;
  background : whitesmoke;
  padding    : .3em .6em;
  }
th {
  min-width : 10em;
  }
th:nth-child(3) {
  min-width : 5em;
  }
td button:first-of-type {
  margin-right: .2em;
  }
tr.green td {
  background: lightgreen;
  }

<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>
<div>
  <button id="bt-Add">Add</button>
</div>
<div>
  <table id="t-output">
    <thead>
      <th>Title</th>
      <th>Author</th>
      <th>Button</th>        
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
<div>
  <h1>Removed elements</h1>
  <table id="t-removed">
    <tbody>
    </tbody>
  </table>
</div>

CodePudding user response：

Here is the answer i just changed the remove function.

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

function addToTable() {
  output.innerHTML  = "<tr>"   "<td>"   title.value   "</td>"  
    "<td>"   author.value   "</td>"  
    "<td>"   "<input type='button' onclick='post(this);' id='post' value ='Post'>"  
    "<input type='button' onclick='remove(this);' id='remove'value ='Remove'>"   "</td>"   "</tr>"
}

   

function remove(btn){
            var row = btn.parentNode.parentNode;
            var removed = document.getElementById("removed");
            removed.append(row);
            row.parentNode.appendChild(row);
    }

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

<body>
  <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>
  <div>
    <input type="button" value="Add" onclick="addToTable();">
  </div>
  <div>
    <table id="output">
      <th style="width:45%;">Title</th>
      <th style="width:45%;">Author</th>
      <th style="width:10%;">Button</th>
    </table>
  </div>
  <div>
    <h1>Removed elements</h1>
    <table id="removed">

    </table>
  </div>
</body>