如何使用javascript变量使用jQuery隐藏元素

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

Answer 1

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

Answer 2

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

Answer 3

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.