CODEWITHSUNDEEP
javascriptjqueryhtmlcss
abbas_arezoo
abbas_arezoo

Reputation: 1078

Having issues attempting to hide content using .hide()

I'm attempting to build a template builder of sorts for a client and was hoping for some advice on how to hide a template block once it's been brought into the builder. The basic idea is you have a simple page that holds a list of HTML template blocks that the user can select to build their template - assuming here that #content is the container that holds the separate template blocks.

I'm bringing in content from an external HTML file using this:

$('.add-section').click(function() {
    var content = '';
    $.ajax({ type: "GET",   
        url: "sections/new-section.html",   
        async: false,
        success : function(text)
        {
            content = text;
        } 
    });
$( '#content' ).append( content );
return false;
});

This works fine, however I'd like to include a "hide" button inside the HTML blocks so once inside the builder the user has the option to hide it if it's repeated or not necessary.

I've attempted to use .hide() below but to no effect.

$(".hide").click(function() {
    $(this).parent().parent('table').hide();
return false;
});

Any help would be greatly received!

Upvotes: 0

Views: 64

Answers (2)

Paul Rad
Paul Rad

Reputation: 4882

Try this

$(document).on('click', '.hide', function(e) {
    $(this).parent().hide();
e.preventDefault();
});

http://jsfiddle.net/r33L5/3/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Since the items are loaded dynamically

$("#content").on('click', '.hide', function () {
    $(this).closest('table').hide();
    return false;
});

Upvotes: 2

Related Questions