CODEWITHSUNDEEP
jqueryhtml-tabledelete-row
Dunshea
Dunshea

Reputation: 15

Delete tr using jquery

I have created a table and want to remove the rows with jquery.

I have looked everywhere and I cannot work out what I have done wrong.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    $("#ao-referrer-summary").on('click', '.btnDelete', function () {
        $(this).closest('tr').remove();
    });
});
</script>
<table id="ao-referrer-summary">
    <thead>
        <tr>
            <th>Referrer First Name</th>
            <th>Referrer Last Name</th>
            <th>Delete User</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>%%FNAME%%</td>
            <td>%%LNAME%%</td>
            <td>
                <button class="btnDelete">&times;</button>
            </td>
        </tr>
        <tr>
            <td>%%FNAME%%</td>
            <td>%%LNAME%%</td>
            <td>
                <button class="btnDelete">&times;</button>
            </td>
        </tr>
    </tbody>
</table>

js fiddle http://jsfiddle.net/designstreet1/4pvrtghu/

Upvotes: 1

Views: 253

Answers (3)

Aatman
Aatman

Reputation: 573

You just need to include jquery library in order to make your js code work.

Screen shot here, and above is the updated fiddle link

$(document).ready(function () {
    $("#ao-referrer-summary").on('click', '.btnDelete', function () {
        $(this).closest('tr').remove();
    });
});
<table id="ao-referrer-summary">
    <thead>
        <tr>
            <th>Referrer First Name</th>
            <th>Referrer Last Name</th>
            <th>Delete User</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>%%FNAME%%</td>
            <td>%%LNAME%%</td>
            <td>
                <button class="btnDelete">&times;</button>
            </td>
        </tr>
        <tr>
            <td>%%FNAME%%</td>
            <td>%%LNAME%%</td>
            <td>
                <button class="btnDelete">&times;</button>
            </td>
        </tr>
    </tbody>
</table>
http://jsfiddle.net/4pvrtghu/2/

Upvotes: 1

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Your code is working just need to load jQuery library to make it work. Choose the jquery library at upper left dropdown list. Thats how to use JSFIDDLE. And after that you're good to go mate. See screenshot below :

enter image description here

And if you're using code snippet, here the section to include library :

enter image description here

Working DEMO

Upvotes: 2

guradio
guradio

Reputation: 15555

$(document).ready(function () {
    $("#ao-referrer-summary").on('click', '.btnDelete', function () {
        $(this).closest('tr').remove();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="ao-referrer-summary">
    <thead>
        <tr>
            <th>Referrer First Name</th>
            <th>Referrer Last Name</th>
            <th>Delete User</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>%%FNAME%%</td>
            <td>%%LNAME%%</td>
            <td>
                <button class="btnDelete">&times;</button>
            </td>
        </tr>
        <tr>
            <td>%%FNAME%%</td>
            <td>%%LNAME%%</td>
            <td>
                <button class="btnDelete">&times;</button>
            </td>
        </tr>
    </tbody>
</table>

Problem is Missing Script. Code is ok

Upvotes: 1

Related Questions