CODEWITHSUNDEEP
javascriptjqueryhideshowgetelementbyid
udo
udo

Reputation: 19

How do I hide an element with jQuery using a javascript variable

I am having trouble hiding this page element with the id below in the html code

<table cellspacing=5 cellpadding=3>
  <tr>
    <td id="lst2"><h4>Apple Ipad for sale N70,000 (negotiable)</h4></td>
    <td><a href="unibay.php" class="button edit">EDIT</a></td>
    <td><a href="#" onclick="del('lst1');" class="button cross">DELETE</a></td>
  </tr>
  <tr id="lst2">
    <td><h4>Apple Ipad for sale N70,000 (negotiable)</h4></td>
    <td><a href="unibay.php" class="button edit">EDIT</a></td>
    <td><a href="#" value="list2" onclick="del('lst1');" class="button">DELETE</a></td>
  </tr>
</table>

I want to be able to hide the element with the selected id using jQuery called in a javascript function. Below is the code but its not working:

function del(obj) {
    $(document).ready(function(){
        var tdiv = document.getElementById(obj) ;
        var sdiv = "#" + tdiv ;
        $('.button').click(function () {
            $(sdiv).fadeOut('slow');
        });
    });
}

Upvotes: 1

Views: 2398

Answers (3)

thecodeparadox
thecodeparadox

Reputation: 87073

I think you should do like this, as your obj contains a string, the id of your target, then following approach is enough.

var sdiv = "#" + obj;
$('.button').click(function () {
   $(sdiv).fadeOut('slow');
});

Problem in your code

  • var tdiv = document.getElementById(obj); line return an DOM element. So if you need to use this in your code then it will look like:

    function del() {
   var tdiv = document.getElementById(obj);
   $('.button').click(function() {
     $(tdiv).fadeOut('slow');
   });
}

Here, $(tdiv) will make your tdiv element to a jQuery object. But tdiv.fadeOut('slow') will not work.

  • and you not need $(document).ready() inside your del() function. So your code will look like:

    function del(obj) {
    var sdiv = "#" + obj;
    $('.button').click(function () {
      $(sdiv).fadeOut('slow');
    });
 }

Upvotes: 3

Nathan Bell
Nathan Bell

Reputation: 2362

In this line:

        var tdiv = document.getElementById(obj);

getElementById() returns the DOM element which you then assign to 'tdiv'. Thus, when you concatenate it to the "#" string you are actually adding a string + a DOM object (which doesn't work).

There's an easy fix. Since you have the id of the element stored in the variable 'obj' already, you can concatenate that:

        var sdiv = "#" + obj;
        $('.button').click(function () {
            $(sdiv).fadeOut('slow');
        });

Some of the other posters have pointed out that you shouldn't put document.ready() inside of your del function, that instead it should be outside of it. I disagree completely. If you follow their suggestion, your code will break as the 'del' function will not be available in the global namespace.

Upvotes: 0

sachleen
sachleen

Reputation: 31141

$(function() {

    $('.button').click(function () {
        $(this).parent().parent().fadeOut('slow');
    });

});

Things wrong with your code:

  • document.ready shouldn't be inside of the function. You put functions inside of the document.ready
  • You bound the click event inside a function. That's not necessary as you can use this inside the click event to get the clicked element and then .parent() twice to get the tr it belongs in. (once gets you the td, again gets you the td's parent which is tr)

Upvotes: 0

Related Questions