How to remove table row by passing your id to an object?

Question

I would like to click the remove row button from the table, run an ajax function that would pass the row id to the java method. Page deletion works, but I’m not getting the id to delete the right item in the java arrayList.

$("#associarCanalDeVendaAPlano").on("click", function(e){

            e.preventDefault();
            var codigo = $('#canal').val();

            var id = $("#canal option:selected").text();
            $('#tabelaCanais').on('click', ".remover", function(e){

                    var $this = $(this);

                    $   .ajax({
                        type: "POST",
                        url: $.url.get('removerVigenciaCanalVendaPlano'),
                        data:{'vigenciaCanalVendaVO.canalVendaVO.nome':$("#id").val()},
                        beforeSend: function() {
                            bloquearTela();
                    },
                    complete: function() {
                            desbloquearTela();

                    } ,success: function(data) {
                        alert('success');
                        $this.closest('tr').remove();
                    },
                    error: function(data){
                        alert('error');
                    }
                    });
                });             
                $.ajax({
                    type: "POST",
                    url:  $.url.get('salvarRelacaoCanalVendaPlano'),
                    data: {'vigenciaCanalVendaVO.canalVendaVO.codigo':$("#canal").val(), 'vigenciaCanalVendaVO.dataInicioVigenciaAssociacaoPlano' : $("#dataInicioVigencia").val(),
                        'vigenciaCanalVendaVO.dataFimVigenciaAssociacaoPlano':$("#dataFimVigencia").val(),'vigenciaCanalVendaVO.canalVendaVO.nome':$("#canal option:selected").text()},
                    beforeSend: function() {
                            bloquearTela();
                    },
                    complete: function() {
                            desbloquearTela();

                    } ,success: function(data) {

                        if($("#canal").val() != null){
                            //alert('sucess');
                            //alert('Estou aqui'+$('#canal').val()+"  "+ $('#dataInicioVigencia').val()+"  "+$('#dataFimVigencia').val());

                             var coluna = "<tr>";

                             coluna += "<td width='40%'  align='center'><input type='text' disabled = 'disabled'   value=' "+$("#canal option:selected").text()+"' style='width: 136px;' /></td>";
                             coluna +="<td width='40%'  align='center'><input type='text'  mask = '99/99/9999' disabled = 'disabled'  size='12' maxlength='10'  value="+$("#dataInicioVigencia").val()+" name='vigenciaCanalVendaVO.dataInicioVigenciaAssociacaoPlano'/>"
                             coluna +=" &nbsp;&nbsp;&nbsp;&nbsp;At&eacute;&nbsp;&nbsp;&nbsp;&nbsp; <input type='text' mask='99/99/9999'  disabled = 'disabled'  size='12' maxlength='10'  value="+$("#dataFimVigencia").val()+" name='vigenciaCanalVendaVO.dataFimVigenciaAssociacaoPlano'/></td>";
                             coluna +="<td align='center'><img src='/EEDI-Administrativo/includes/images/bt_remover.gif' class='remover' id='"+id+"'  style='cursor:pointer;cursor:hand;'/></td>";
                             coluna += "</tr>";

                             $("#canal option[value='"+$("#canal").val() +"']").remove();
                             //alert(coluna);    
                             ($('#tabelaCanais')).append(coluna);
                        }
                    },
                    error: function(data){
                        //alert('error');
                    }

                });

Html page:

 <s:form action="incluir" id="form">
    <jsp:include page="../menu.jsp"></jsp:include>
    <table  style="width: 100%" class="tabela_interna">
        <tr>
            <th colspan="5">Plano</th>
        </tr>
        <tr>
            <td width="14%" class="td_label"><label for="nome">Nome:</label></td>
            <td width="90%" colspan="4">
                <s:textfield name="planoVO.nome" id="nome" data-required="Nome" maxlength="50" size="50"/>
            </td>
        </tr>
        <tr>
            <td width="10%" class="td_label"><label for="valorTaxa">Valor Taxa (R$):</label></td>
            <td width="90%" colspan="4">
                <s:textfield name="planoVO.valorTaxa" id="valorTaxa" data-type="currency" maxlength="6" size="6"/>
            </td>
        </tr>
        <tr>
            <th colspan="5">Tipo Cobrança / Valor</th>
        </tr>
        <tr>
            <td class="td_label" width="10%"></td>
            <td class="td_label" align="center" width="20%">Valor Titular (R$)</td>
            <td class="td_label" align="center" width="20%">Valor Dependente (R$)</td>
            <td class="td_label" align="center" colspan="2" width="50%">Período de Carência</td>
        </tr>

        <s:iterator value="planoVO.listaDeValorPlano" var="tipoCobrancaEValoPlano">
            <tr>
                <td class="td_label" align="center"><s:property value="tipoCobranca"/></td>
                <td class="td_dados" align="center">
                    <input type="text" maxlength="10" size="12" id="<s:property value='tipoCobranca'/>_T" name="mapTipoCobrancaEValor['<s:property value='tipoCobranca'/>_T']" value="<s:property value='valorTitular'/>" data-required="Valor Titular / <s:property value='tipoCobranca'/>" data-type="currency"/>
                </td>
                <td class="td_dados" align="center">
                    <input type="text" maxlength="10" size="12" id="<s:property value='tipoCobranca'/>_D" name="mapTipoCobrancaEValor['<s:property value='tipoCobranca'/>_D']" value="<s:property value='valorDependente'/>" data-required="Valor Dependente / <s:property value='tipoCobranca'/>" data-type="currency" />
                </td>
                <td class="td_dados" align="center" colspan="2">
                    <textarea cols="70" rows="4" id="<s:property value='tipoCobranca'/>" name="mapTipoCobrancaEPeriodoCarencia['<s:property value='tipoCobranca'/>']" data-required="Período de Carência / <s:property value='tipoCobranca'/>" ><s:property value='periodoCarencia'/></textarea>
                </td>
            </tr>
        </s:iterator>
    </table>

    <table  id="tabelaCanais" style="width: 100%" class="tabela_interna">
                <tbody>
            <tr>
                <th colspan="3">Canal / Vigência</th>
            </tr>
                <tr>
              <td class="td_label" colspan="1"  align="center">Canal de Venda</td>
              <td class="td_label"  colspan="1"   align="center">Vigência</td>
              <td class="td_label"   align="center">Ações</td>
            </tr>
            <tr>

                <td colspan="" width="40%" align="center">  
                    <s:select name="vigenciaCanalVendaVO.canalVendaVO.codigo" id="canal" value="vigenciaCanalVendaVO.canalVendaVO.nome" list="listaDeCanais" headerKey="0"  listKey="codigo" listValue="nome" />
                </td>
                <td width="40%" align="center">
                     <s:textfield name="vigenciaCanalVendaVO.dataInicioVigencia" id="dataInicioVigencia" data-mask="data" data-date-type="default" size="12"/>
                     &nbsp;&nbsp;&nbsp;&nbsp;Até&nbsp;&nbsp;&nbsp;&nbsp;
                     <s:textfield name="vigenciaCanalVendaVO.dataFimVigencia" id="dataFimVigencia" data-mask="data" data-date-type="default" size="12"/>

               </td>
                <td align="center" width="10%">
                    <img src="<c:url value="/includes/images/bt_adicionar.gif" />" id="associarCanalDeVendaAPlano"   style="cursor:pointer;cursor:hand;"/>
               </td>                    
            </tr>


    </tbody>
   </table>
        <br/><br/><br/><br/>
    <table id="tabela_botoes" style="width: 100%">
        <tr>
            <td align="center" width="100%">
                <img src="<c:url value="/includes/images/bt_incluir.gif" />" id="incluir" style="cursor:pointer;cursor:hand;"/>
                &nbsp;&nbsp;&nbsp;
                <img src="<c:url value="/includes/images/bt_voltar.jpg" />" id="voltar" style="cursor:pointer;cursor:hand;"/>
            </td>
        </tr>
    </table>

</s:form>

Answer 1

You are delegating the click on an element with the class remover. I see in your HTML that this element has ID so you just need to use $this.attr('id').

Since the this inside Event Handler is already the element that clicked and has the ID you want to use. So I suggest using:

data: {'vigenciaCanalVendaVO.canalVendaVO.nome': $this.attr('id')},