Question

Can anyone assist with how to successfully use JQueryUI Dialog where I remove a table row that is displayed in the dialog by using a link or some other mechanism?

Here is a visual of the code I’m working with

http://i51.tinypic.com/30sh55t.png

HTML

    <tr>
        <td>1/1/0001</td>
        <td>THOMAS</td>
        <td>LNAMEONE<input type="hidden" id="name_17053942" value="LNAMEONE" /></td>
        <td>SKIN TW</td>
        <td>17053942<input type="hidden" id="number_17053942" value="SKINNER" /></td>
        <td>1/7/2009</td><td>Graph Trend View <a href="#" id="17053942" class="ui-state-add ui-corner-all">Add</a></td>
        <td class="hide-cell">
        <!-- ui-dialog -->
       <div id="dialog_17053942_message" title="17053942 THOMAS SKINNER">
        <p></p>
       </div>            
        </td>
    </tr>

    <tr>
        <td>6/21/2010</td>
        <td>EMERY</td>
        <td>LNAMETWO<input type="hidden" id="name_ZF365763B" value="LNAMETWO" /></td>
        <td>RAND E</td>
        <td>ZF365763B<input type="hidden" id="number_ZF365763B" value="ZF365763B" /></td>
        <td>1/7/2009</td><td>Graph Trend View <a href="#" id="ZF365763B" class="ui-state-add ui-corner-all">Add</a></td>
        <td class="hide-cell">
        <!-- ui-dialog -->
       <div id="dialog_ZF365763B_message" title="ZF365763B EMERY RANDOLPH">
        <p></p>
       </div>            
        </td>
    </tr>

JQUERY

    $(function() {

      // Dialog
      $('#carrier-list').dialog({
        autoOpen: false,
        resizable: false,
        height: 260,
        modal: true,
        width: 240,
        buttons: {
          "Compare Carriers": function() {
            $(this).dialog('close');
          },
          "Save": function() {
            $(this).dialog('close');
          }
        }

      });

      // Dialog Link
      // This adds a carrier to a list
      $('.ui-state-add').click(function() {

   var target = $(this).attr("id");
   //alert(target);

   $("#carrier-table").prepend("<tr id='" + target + "'>" +
       "<td><a href='#' id='" + target + "' class='ui-state-remove ui-corner-all'>remove</a></td>" +
       "<td>" + target + "</td>" +
       "<td>" + $("#name_" + target).val() + "</td>" +
      "</tr>"); 

     $('#carrier-list').dialog('open');
        return false;
      });

      //hover states on the static widgets
      $('.ui-state-add').hover(
         function() { $(this).addClass('ui-state-hover'); },
         function() { $(this).removeClass('ui-state-hover'); }
        );

      // Remove Dialog Link
      // This adds a carrier to a list
      $('.ui-state-remove').click(function() {

        var target = $(this).attr("id");
        alert(target);

        $('#' + target).remove(); ;

        //$('#carrier-list').dialog('open');
        return false;
      });                

    });

Answer 1

I came up with a solution.

   <script type="text/javascript" id="removeCarrier">
     function removeCarrierFromList(obj) {
       var i = obj.parentNode.parentNode.rowIndex;
       document.getElementById('carrier-table').deleteRow(i);
       $('#' + obj.id).removeClass('delete-carrier-company');
       //alert(obj.id); //.hasClass('add-carrier-company').tostring() ); //

       $('#' + obj.id).bind('click', function() {
          //alert('User clicked on ' + obj.id);
       });
     }
   </script>