1

Caros, criei uma rotina que adiciona uma tr a uma tabela existente, e estou tentando criar um botao para remover esta tr, mas ainda não consegui.

Usei o seguinte codigo para adicionar a tr, este funciona normalmente:

HTML

<table id="Table">
<tbody>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
    <tr style="background:white">
    <td>Item1</td>
    <td>Item2</td>
    <td>Item3</td>
    <td><input type="button" class="Remover" value="x" style="background:red;"></td>
    </tr>
</tbody>

JavaScript

$('#Table').click(function(){
    var conta = 0;
    var dados = [$('#Item1').val(),$('#Item2').val(),$('#Item3').val(),$('#Item4').val()];
    var cols = '<tr style="background:white">';
    for(var i=0; i < 8; ++i){           
        if(dados[i] == ""){
            conta=1;
            } else{
            cols += '<td>'+dados[i]+'</td>';    
            }
    };
    if(conta==0){
    cols += '<td><input type=\"button\" id=\"Remover\" value="x" style=\"background:red;\" /></td>';
    cols += '</tr>';
    $("#InserirPedido tbody").append(cols);
    return false;
    }else{
        alert('Preencha todos os campos');
        return false;
    }
});

Tentei usar o seguinte codigo pra remover, porém sem sucesso:

$('#Remover').click(function () {
     $(this).closest('tr');
});
2
  • Não mudes a pergunta. Deixa como estava senão as respostas vão ficando erradas. Repara que eu usei uma classe com R pequeno. Exemplo: jsfiddle.net/0686n0qy
    – Sergio
    Commented 15/05/2015 às 11:36
  • ops...desculpe Sergio
    – Thiago
    Commented 15/05/2015 às 11:37

2 Respostas 2

3

Algo que você pode fazer é colocar class no lugar do ID 'remover'.

cols += '<td><input type=\"button\" class=\"remover-linha\" value="x" style=\"background:red;\" /></td>';

Daí você pode criar uma função jQuery.

$('#Table').on('click', '.remover-linha', function(){
    $(this).closest('tr').fadeOut(300);
});

Como os objetos são criados dinâmicamente, o On deve ser utilizado.

2

Tens dois problemas. Um é que não podes ter IDs duplicados, o outro é que o oscultador de eventos não é adicionado a HTML que ainda não existe, tens de usar delegação.

Usa classes nesse HTML que acrescentas:

cols += '<td><input type=\"button\" class=\"remover\" value="x" style=\"background:red;\" /></td>';

e depois usa delegação assim:

$('#Table').on('click', '.remover', function () {
     $(this).closest('tr').remove();
});

Podes ler mais aqui sobre delegação.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .