2
respostas

Excluir apenas a td que cliquei e imcrementar uma função

Bom dia,estou com duas dúvidas simples

class View {

    constructor(elemento){
        this._elemento = elemento;
    }

    template(model) {
        return `
            <table class="table">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Nome</th>
                    <th scope="col">IMC</th>
                </tr>
                </thead>
                <tbody>
                ${model.pacientes.map(n => {
                    return `
                        <tr class="linha-tabela">
                            <th scope="row">${n.posicao()}</th>
                            <td>${n.nome}</td>
                            <td>${n.imc}</td>
                        </tr>

                        </tbody>
                    `
                }).join('')}
            </table>
        `
    }


    update(model) {
        this._elemento.innerHTML = this.template(model)
    }

}

No método _removeUsuario() queria que ele removesse o target mas ele sempre exclui o último item

class Controller {
    constructor() {
        let $ = document.querySelector.bind(document);
        this._inputNome = $("#nome") ;
        this._inputPeso = $("#peso");
        this._inputAltura = $("#altura");
        this._listaPacientes = new ListaPacientes();
        this._view = new View($(".adiciona-form"));
        this._view.update(this._listaPacientes);      
    }

    _limpaFormulario() {
        this._inputNome.value = "";
        this._inputPeso.value = "";
        this._inputAltura.value = "";

        this._inputNome.focus();
    }

    _removeUsuario() {
        $(".linha-tabela").dblclick(function() {
            this.remove();
        })
    }

    adiciona(event) {
        event.preventDefault();

        let modelo = new Model(
            this._inputNome.value,
            this._inputPeso.value,
            this._inputAltura.value,
        )

        this._listaPacientes.adiciona(modelo);
        this._view.update(this._listaPacientes);
        this._limpaFormulario();
        this._removeUsuario();
        console.log(this._listaPacientes.pacientes);       
    }  
}

e no método posicao() queria que ele colocasse de 0 a 10 como id a cada usuario que eu adicionar

class Model {

    constructor(nome, peso, altura) {
        this._nome = nome;
        this._peso = peso;
        this._altura = altura;
        Object.freeze(this);
    }

    get nome() {
        return this._nome;
    }

    get peso() {
        return this._peso;
    }

    get altura() {
        return this._altura
    }

    get imc() {
        return  Math.round(this._peso / (this._altura * this._altura));
    }

    posicao() {
        let ordem = [1,2,3,4,5,6,7,8,9,10];
        for(var i = 0; i < 10 ; i++) {
           return  ordem[i];
        }    
    }
}
2 respostas

Yuri, boa tarde!

Isso porque o elemento que está sendo selecionado, é apenas uma linha, o que eu recomendaria você fazer é algo que chamamos de event delegation ao invés de você colocar o evento na linha que deseja excluir, colocar no pai de todas elas, que nesse caso seria o tbody

$('tbody').on('dblclick', 'tr', function(evento){
    this.remove();
}

Espero ter ajudado e bons estudos!

Ajudou sim, muito obrigado!! E sobre a parte do ID? queria que a cada paciente adicionado ele desse um ID para ele.