Removing a row of a table on the fly - not working

Question

In a view of a MVC app a table is presented to the user. This table doesn't have a head row, only the <tbody> rows. Each row has a column with the name of a document and a button to delete it, as below:

<table>
    <tbody>
        <tr id="doc-AD201">
            <td>AD201</td>
            <td class="text-right">
                <button class="excluir" data-id="AD201" title="Delete the document">Delete</button>
            </td>
        </tr>
        <tr id="doc-AD504">
            <td>AD504</td>
            <td class="text-right">
                <button class="excluir" data-id="AD504" title="Delete the document">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

Well, to accomplish this I wrote the following jQuery function:

$('.excluir').click(function () {
    $('#doc-' + $(this).data('id')).fadeOut();
});

It's not working. Why? I have a similar code to these in another view and it's working perfectly. What am I doing wrong? What am I missing?

I think @RajaprabhuAravindasamy is right here since what you posted works fine https://jsfiddle.net/j08691/2L1g969s/ — j08691, Feb 26 '16 at 18:23
@RajaprabhuAravindasamy, yes. the table is created on the fly. — Paulo Ricardo Ferreira, Feb 26 '16 at 18:24
Seems to work just fine : https://jsfiddle.net/DinoMyte/up4j39qr/10/ — DinoMyte, Feb 26 '16 at 18:24
Then you need to go with event delegation for binding events — Rajaprabhu Aravindasamy, Feb 26 '16 at 18:24
@PauloRicardoFerreira : if the elements are being created on the fly, you need click event delegation, like $(document).on("click",".excluir",function () { $('#doc-' + $(this).data('id')).fadeOut(); }); — DinoMyte, Feb 26 '16 at 18:26
@DinoMyte, it's really amazing. I have created this //jsfiddle.net/8gz0jsnq/3/. It just simply doesn't work. — Paulo Ricardo Ferreira, Feb 26 '16 at 18:27
@PauloRicardoFerreira: The link you posted seems to be doing what you mentioned in the question. what is the behavior are you expecting other than the asked ? Here's an example that utilizes generating elements dynamically and fades them : https://jsfiddle.net/DinoMyte/up4j39qr/11/ — DinoMyte, Feb 26 '16 at 18:31
@DinoMyte, what I'm telling is that the fiddle I created and posted simply does not work when I run it and click any of the Delete buttons. Even when I clck the Test button, no alert is shown! Believe me. I'm so ashamed. — Paulo Ricardo Ferreira, Feb 26 '16 at 18:37
what browser are you using ? do you see any script errors in the console ? It seems to be working fine in FF for me : http://jsfiddle.net/8gz0jsnq/3/ — DinoMyte, Feb 26 '16 at 18:46

Removing a row of a table on the fly - not working

0 Answers0