jQuery: how to hide TableTools buttons programmatically

Question

I am using the latest version of the jQuery plugins DataTables and TableTools (source: https://datatables.net/extensions/tabletools/).

I have set this up to show two of the standard buttons, one to select all rows and one to deselect all of them. So far everything works as intended.

Now I would like to add a simple button to my page to hide these two buttons programmatically. Investigating them in Firebug shows the following:

<div class="DTTT_container">
    <a id="ToolTables_queueTable_0" class="DTTT_button DTTT_button_text" title="select all rows">
        <span>Select All</span>
    </a>
    <a id="ToolTables_queueTable_1" class="DTTT_button DTTT_button_text DTTT_disabled" title="deselect all rows">
        <span>Deselect All</span>
    </a>
</div>

Based on this I tried to hide them both using the class "DTTT_button" and using the unique IDs but in both cases I am unable to do so.

$('#myButton').on('click', function() {
    $('.DTTT_button').hide();
});

$('#myButton').on('click', function() {
    $('#ToolTables_queueTable_0').hide();
    $('#ToolTables_queueTable_1').hide();
});

Does anyone know a way to achieve this with a different approach?

Answer 1

try using css property to hide the div

$('#myButton').on('click', function() {
    $('#ToolTables_queueTable_0').css("visibility","hidden");
    $('#ToolTables_queueTable_1').css("visibility","hidden");
});