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

Question

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');
        });
    });
}

thecodeparadox · Accepted Answer · 2012-06-16 08:23:14Z

3

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');
    });
 }

edited Jun 16, 2012 at 8:23

answered Jun 16, 2012 at 7:18

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nathan Bell Over a year ago

The code change you outline in your note will break his code. You'll notice that he has attached the del() function directly to the onclick handlers of his elements, but your del() function is a local variable, so it's not available in the global namespace, and thus will never fire.

sachleen · Accepted Answer · 2012-06-16 07:23:19Z

0

$(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)

answered Jun 16, 2012 at 7:23

sachleen

31.2k8 gold badges82 silver badges75 bronze badges

2 Comments

Nathan Bell Over a year ago

Actually the way he has it is perfectly fine. Doing it his way, the del() function is available in the global namespace and at parse time. Since it's assigned to some onclick handlers directly in the HTML, it should work as expected. When del() fires, and the DOM is loaded, the code inside his anonymous function will fire immediately. If it is not loaded, jQuery will queue it and it will fire when the page finishes.

Rune FS Over a year ago

You should use closest("tr") instead of parent parent since you are searching for the row not the parent of the parent. It's incidental that they in this case are the same but the HTML could be changed so that it was the parent of the parent of the parent or simply the parent. Such a change shouldn't break the code

Nathan Bell · Accepted Answer · 2012-06-16 07:54:33Z

0

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.

answered Jun 16, 2012 at 7:54

Nathan Bell

2,3722 gold badges18 silver badges16 bronze badges

1 Comment

Rune FS Over a year ago

It doesn't need to be available in the global namespace. Simply attach it where declared instead of mixing JS and HTML as currently

Collectives™ on Stack Overflow

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

3 Answers 3

Problem in your code

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Problem in your code

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related