Question

I have just started to study jQuery and it seems to be full of opportunities, if I can just learn it.

I have created a table with the last cell containing delete-button. By clicking the button I’ll like to have an confirmation dialog to appear and if the user accepts the row will be deleted. Cancel just closes the confirm dialog.

But I have no idea how to do that, even after reading many examples posted here in stackoverflow or in other sites as well. I just couldn’t adapt those to my project.
So, I love to have guidance for this matter.

My script looks like this now:

<script>
$(document).ready(function(){
    $("#dlgConfirm").hide();
});

$(function() {
    $("#dlgLink").click(function(){
        $( "#dlgConfirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete selected toon": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });     
});
});
</script>

An the html contains these:

<div class="modalForm">
        <div id="toons-contain" class="ui-widget">
            <h1>Toons:</h1>
            <table id="toons" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th class="date">Date</th>
                        <th class="name">Name</th>
                        <th class="note">Note</th>
                        <th class="del">Delete?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="row_1">
                        <td>02.03.2011</td>
                        <td>Michael</td>
                        <td>Driving with KITT</td>
                        <td><a href="#" id="dlgLink" class="ui-state-default ui-corner-all">Delete</a></td>
                    </tr>
                    <tr id="row_2">
                        <td>05.03.2011</td>
                        <td>Dredd</td>
                        <td>Criminal hunting</td>
                        <td><a href="#" id="dlgLink" class="ui-state-default ui-corner-all">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
</div>
<div id="dlgConfirm" title="Delete the selected toon?">
    <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Toon will be deleted and cannot be recovered. Are you sure?
    </p>
</div>

This will work nicely to get the table done and by clicking the delete button that confirm dialog opens.

So can you help me to delete the row where the user clicked it?

Answer 1

First, IDs should be unique. Especially when you add jQuery triggers to them.

For example, this is how I would have done this : http://jsfiddle.net/Nbf9K/

HTML:

<div class="modalForm">
        <div id="toons-contain" class="ui-widget">
            <h1>Toons:</h1>
            <table id="toons" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th class="date">Date</th>
                        <th class="name">Name</th>
                        <th class="note">Note</th>
                        <th class="del">Delete?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="row_1">
                        <td>02.03.2011</td>
                        <td>Michael</td>
                        <td>Driving with KITT</td>
                        <td><a href="#" class="deleteRow ui-state-default ui-corner-all">Delete</a></td>
                    </tr>
                    <tr id="row_2">
                        <td>05.03.2011</td>
                        <td>Dredd</td>
                        <td>Criminal hunting</td>
                        <td><a href="#" class="deleteRow ui-state-default ui-corner-all">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
</div>
<div id="dlgConfirm" title="Delete the selected toon?">
    <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Toon will be deleted and cannot be recovered. Are you sure?
    </p>
</div>

Javascript:

$(document).ready(function(){
    $("#dlgConfirm").hide();
});

$(function() {
    $(".deleteRow").click(function(){
        var $row = $(this).parent('td').parent('tr');
        $( "#dlgConfirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete selected toon": function() {
                    $row.remove();
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });     
});
});