JSFiddle - React, Tailwind, and code Playground
HTML
<table id="tabela-1">
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>IMC</th>
</tr>
<tr class="paciente">
<td class="info-nome" id="nome-1">Leonardo</td>
<td class="info-peso" id="peso-1">57</td>
<td class="info-altura" id="altura-1">1.67</td>
<td class="info-imc" id="imc-1"></td>
<td>
<input type="button" class="btnadd" value="+" />
</td>
<td>
<input type="button" class="btnremove" value="-" />
</td>
</tr>
<tr class="paciente">
<td class="info-nome" id="nome-2">Paulo</td>
<td class="info-peso" id="peso-2">100</td>
<td class="info-altura" id="altura-2">2.00</td>
<td class="info-imc" id="imc-2"></td>
<td>
<input type="button" class="btnadd" value="+" />
</td>
<td>
<input type="button" class="btnremove" value="-" />
</td>
</tr>
<tr class="paciente">
<td class="info-nome" id="nome-2">Paulo</td>
<td class="info-peso" id="peso-2">100</td>
<td class="info-altura" id="altura-2">2.00</td>
<td class="info-imc" id="imc-2"></td>
<td>
<input type="button" class="btnadd" value="+" />
</td>
<td>
<input type="button" class="btnremove" value="-" />
</td>
</tr>
<tr class="paciente">
<td class="info-nome" id="nome-2">Paulo</td>
<td class="info-peso" id="peso-2">100</td>
<td class="info-altura" id="altura-2">2.00</td>
<td class="info-imc" id="imc-2"></td>
<td>
<input type="button" class="btnadd" value="+" />
</td>
<td>
<input type="button" class="btnremove" value="-" />
</td>
</tr>
</table>
CSS
.btnadd {
width: 30px;
height: 30px;
}
JavaScript
document.getElementById('tabela-1').addEventListener('click', function (e) {
var btn = e.target.type == 'button' && e.target;
if (!btn) return;
if (btn.classList.contains('btnadd')) {
var tr = paiTr(btn).cloneNode(true);
this.appendChild(tr);
} else {
console.log(this)
var tr = paiTr(btn);
tr.parentNode.removeChild(tr);
}
});
function paiTr(el) {
var tr = el;
while (tr.tagName.toLowerCase() != 'tr') tr = tr.parentNode;
return tr;
}