Hice esta página web simple que agrega elementos a la tabla. En cada elemento hay un botón para publicar y eliminar. Ignora el botón de publicación porque está funcionando. ¿Cómo puedo hacer que cada vez que haga clic en el botón Eliminar para que esa fila específica se mueva a otra tabla llamada removed elements y los elimine de la tabla principal?
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>lo hare de esta manera...
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 class="bt-post">Post</button>` + `<button class="bt-remove">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>Aquí está la respuesta. Acabo de cambiar la función de eliminación.
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>