jQuery - Hiding a dynamically created table row on click

Question

I'm currently trying to hide a dynamically created table row after a button has been pressed. So far I have managed to handle part of the dynamic functions.

Each dynamic row has a "Cancel" and "Save" button, I have managed to respond to these with ease. My problem is actually working with the row itself.

$(function() {
    $(".add").click(function(){
  // Just append to the table
  $("table#bookmarks tr:first").after("<tr class='new' id='<?php echo rand(1, 9999); ?>'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td><td><a href='#' class='save'>Save</a><br /><a href='#' class='cancel'>Cancel</a></td></tr>");
  $('span#links').html('<i style="color: #FF0000">You must reload to recount links!</i>');
  // Actually, the user doesn't want to add another link
  $('.cancel').click(function() {
   $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow");
  });
  // Seems the user wants to add a link!
  $('.save').click(function() {
   $("table#bookmarks tr.new #id").animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow");
  });
 });

});

I need to now hide the row, I have tried all sorts of various methods, .parent, .attr to name a few.

Thanks for the help, it's much appreciated!

Answer 1

You can use jQuery live, new since jQuery 1.3.2, to preserve the click function on a dynamically created item.

http://docs.jquery.com/Events/live

Answer 2

Sorry to sound so dumb, how would I go about adding this function to my code? I've previously tried using the jQuery live but to no avail.

Answer 3

Try chaining your jQuery functions like this:

$(function() {
    $(".add").click(function() {
     $("<tr class='new'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td></tr>")
      .append($("<td></td>")
       .append($("<a href='#'>Save</a><br/>")
        .click(function() { $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); }))
       .append($("<a href='#'>Cancel</a>")
        .click(function() { $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); })))
      .insertAfter($("table#bookmarks tr:first"));
      $('span#links').html('<i style="color: #FF0000">You must reload to recount links!</i>');
    });
});

(This is a modified version of your original code so it's still a bit messy.)

Answer 4

I tossed together a quick example but I'll admit I'm a tad rusty on jQuery. This code however does work, at least for me.

$(function() {
$(".add").click(function(){
 var save = $("<a href='#' class='save'>Save</a>").click(function() {
  $(this).parent().animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow")
 })

 var cancel = $("<a href='#' class='cancel'>Cancel</a>").click(function() {
  $(this).parent().animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow")
 })

 var buttonTD = $("<td></td>");
 buttonTD.append(save);
 buttonTD.append(cancel);

 var row = $("<tr class='new' id='<?php echo rand(1, 9999); ?>'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td></tr>")
 .append(buttonTD);
});

});

Answer 5

The jQuery live function:

$("#sendmail").live("click", function(){

    // your code goes here  


});

here is an example of how I used it.

$("#sendmail").live("click", function(){

 $("#emailres").html('<img src="../images/ajax-loader.gif">');
 var youremail = $("#youremail").val();
 var subject = $("#subject").val();
 var message = $("#message").val();

 $.ajax({
    type: 'post',
    url: 'email.php',
    data: 'youremail=' + youremail + '&subject=' + subject + '&message=' + message,

    success: function(results) {
  $('#emailres').html(results);
        }
    }); // end ajax 

});

To hide the selected row, do something like this:

first give your table an id (something like #mytable)

$("#cancel_row").live("click", function(){

 $(this).$("#mytable tr").hide();

});

hope that helps you.