Boa tarde ,gostaria de deletar uma linha(tr) por um botão seguindo os padrões ensinados pela aula.
Implementação ProdutoController
class ProdutoController {
constructor() {
// VALORES EXTRAIDOS DOS FORMULARIOS
let $ = document.querySelector.bind(document);
this._inputNome = $('#nome');
this._inputQuantidade = $('#quantidade');
this._inputValor = $('#valor');
//INSTANCIAR A LISTA
this._listaProdutos = new ListaProdutos();
//INSTANCIAR A VIEWS
this._produtoView = new ProdutoView($('#produtoView'));
this._produtoView.update(this._listaProdutos);
}
//EVENTOS
adicionar(event) {
event.preventDefault();
this._listaProdutos.adiciona(this._criaProduto());
this._produtoView.update(this._listaProdutos);
this._limparFormulario();
}
remover(event) {
//tentei utilizar este metodo para remover o elemento pai consequentemente todas tds dentro dela ao clicar em uma td desta tr
var links = document.querySelectorAll('tr');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', removerPai);
}
function removerPai(e) {
e.preventDefault();
var li = this.parentNode;
li.parentNode.removeChild(li);
}
}
_criaProduto() {
return new Produto(this._inputNome.value, this._inputQuantidade.value, this._inputValor.value);
}
_limparFormulario() {
this._inputNome.value = '';
this._inputQuantidade.value = 1;
this._inputValor.value = 0;
this._inputNome.focus();
}
}Implementação ProdutoView
class ProdutoView extends View {
constructor(elemento) {
super(elemento);
}
//ao abrir o console diz que a negociacaoController.remove(event) não é reconhecida isso pelo fato dela não ter sido instanciada aqui
//entretanto se eu não criar um botão aqui eu não vou conseguir criar o evento aqui
template(model) {
return `
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>NOME</th>
<th>QUANTIDADE</th>
<th>VALOR</th>
<th>BOTAO </th>
</tr>
</thead>
<tbody>
${model.produtos.map(p => `
<tr >
<td>${p.nome}</td>
<td>${p.quantidade}</td>
<td>${p.valor}</td>
<td onclick="negociacaoController.remover(event)"><button class="btn btn-danger" type="button">Deletar</button></td>
</tr>
`)}
</tbody>
<tfoot>
</tfoot>
</table>
`;
}
}
