How can I delete jquery object at runtime?

Question

$("#id").tooltip({ 
        effect: "slide", 
        tip: '.tooltip' 
    });

I want to delete the object created by this code.

"flowplayer jquery tools" plugin

This question has an answer described in the bottom of my post!

See the bottom if you don't wanna loose you time

.

----------UPDATE----------

That should be something like this

The code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
    <title>jQuery tooltip</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

    <script type="text/javascript">


/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
    $(document).ready(function() {
        $("#_2").tooltip({ 
            effect: "slide", 
            tip: '.tooltip' ,
            position: 'bottom center'
        }); 

    });
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/




/** The code below is not working as I expect, it doesn't MOVE tooltip **/

           var old_id;

    //first time - create tooltip
        function my_create(id){
            $("#"+id).tooltip({ 
                effect: "slide", 
                tip: '.tooltip', 
                position: 'bottom center'
            });     
        }

     //next times - move tooltip to other element
        function my_unlink(id){
            $("#"+id).unbind("mouseover"); 
            //todo
        }

        function my_link(id){
            //todo
        }


        //THE MAIN FUNCTION

        function do_tip(new_id){
            if(old_id){
                my_unlink(old_id);
                my_link(new_id);
                alert(new_id);
            }
            else
                my_create(new_id);

            old_id=new_id;
         //new_id.focus();
     } 

    </script> 

  <style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:14px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
    }

  </style>
</head>
<body>

    <h1 onclick="do_tip(this.id)" id="_1">John</h1>
    <h1 onclick="do_tip(this.id)" id="_2">Mary</h1>
    <h1 onclick="do_tip(this.id)" id="_3">Dan</h1>
    <h1 onclick="do_tip(this.id)" id="_4">Paul</h1>
    <h1 onclick="do_tip(this.id)" id="_5">Kim</h1>

    <div class="tooltip">There should be only one tooltip on a page!</div>

</body></html>

.

---------UPDATE 2----------

Here's the answer

Linking/unlinking jquery object to an element

The moral of this long tale is:

I've been thinking it's a common, not code or plugin-specific question. I thought that the solution should be as simple as "destroy old tooltip object and then create a new one, attatched to other element"

Is this a plugin you're using? If so there might be a way to delete it in the plugins API. — Fermin, Jan 22 '10 at 13:13
Which plugin is this? Can't answer without knowing what the plugin creates. — Nick Craver, Jan 22 '10 at 13:24
please specify all the necessary html to run this code, as well as the javascript library and plugin used — bjelli, Jan 22 '10 at 13:24
how about just don't use this plugin for particular objects? — Darmen Amanbay, Jan 23 '10 at 08:48

bjelli · Accepted Answer · 2010-01-23T08:43:49.857

You write that you want to delete the object created by the code.

What the code does is that first searches for an element with id 'ID' in your page, let's call this "the trigger".

I'm changing one thing in the code here: Instead of selecting the trigger by id 'ID' I select using the class 'do_tooltip_for_this'. This way I can set up a tooltip for multiple triggers at once.

If the user moves the mouse over the trigger, an element with class 'tooltip', that is already present in the page, will be shown and positioned near that trigger. If the user moves the mouse away from the trigger this element is automatically hidden again. This works for several triggers as well, the same tooltip is reused.

You can also hide the tooltip by hand by writing

  $('.tooltip').hide();

You can disable the whole behaviour by writing

$(".do_tooltip_for_this").unbind("mouseover");

Here's the whole code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>

    <title>jQuery tooltip</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

    <script type="text/javascript">
      var o;
    $(document).ready(function() {

    o = $(".do_tooltip_for_this").tooltip({ 
        effect: "slide", 
        tip: '.tooltip' ,
        position: 'bottom center'
    }); 
                  
    });
  </script> 
  <style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:12px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
    }

  </style>
</head>
<body>

    <h1 title="a tooltip regarding John" class="do_tooltip_for_this">This is John</h1>
    <h1 title="a tooltip regarding Paul" class="do_tooltip_for_this">This is Paul</h1>
    <h1 title="a tooltip regarding George" class="do_tooltip_for_this">This is George</h1>
   <h1 title="a tooltip regarding Ringo" class="do_tooltip_for_this">This is Ringo</h1>

    <div class="tooltip"></div>

</body></html>

Thanks, you've understood me the best. Now I can formulate the question more concrete: I have 5 trigger elements and 1 tooltip object. How can rebind the tooltip from one element to another? — Dan, Jan 22 '10 at 16:42
To get better answers you should give more context in your question. in this case: show not only the javascript, but also the affected html. — bjelli, Jan 23 '10 at 08:46
Thanks, I've posted the code! I've been thinking it's a common, not code or plugin-specific question. I thought that the solution should be as simple as "destroy old tooltip object and then create a new one, attatched to other element". Well, it looks like things are more complicated — Dan, Jan 23 '10 at 11:01

thmascrown · Answer 2 · 2013-05-30T13:57:02.297

0

$("#id").removeData('tooltip');

edited May 30 '13 at 13:57

answered Apr 25 '13 at 12:11

thmascrown

1
1

score 0 · Answer 3 · answered Jan 22 '10 at 13:15

0

How about using this:

delete (object_here);

This will remove the javascript objects.

answered Jan 22 '10 at 13:15

Sarfraz

377,238
77
533
578

This won't actually delete the tooltip. Delete is used to delete an object in JavaScript. – Parrots Jan 22 '10 at 13:39

Reigel Gallarde · Answer 4 · 2010-01-22T13:48:10.483

0

by using jQuery you could use .remove()

$("#id").remove(); // will remove element with an id of 'id'

EDITED

it work for someone here. It might also work on you.

// unbind focus and mouseover to cover all the bases just 
  // incase the tooltip is not being applied to an input 
  $("#id").unbind("focus"); 
  $("#id").unbind("mouseover");

edited Jan 22 '10 at 13:48

answered Jan 22 '10 at 13:21

Reigel Gallarde

64,198
21
121
139

2

This would delete the actual item...he wants to delete the tooltip added to that item by the plugin, but hard to answer without knowing which plugin. – Nick Craver Jan 22 '10 at 13:23
I think this code removes the object that has the tooltip and not the tooltip object. – rahul Jan 22 '10 at 13:24
That's a good suggestion, thanks. But can I just kill the tooltip? – Dan Jan 22 '10 at 16:00

score 0 · Answer 5 · answered Jan 22 '10 at 13:31

Depends. If you to something like .remove() on it, it actually removes the entire element with that ID from the page.

If you just want to remove the tooltip from it, check out the plugin that you're using. Usually plugins provide a destroy option (the dialog provided by jQuery UI does this).

Unless you're willing to remove the entire element from the page and then recreate it, these is nothing in the core library to do that. If you wanna give that method a go this would get you going in the right direction:

$('#id').replaceWith($('#id').clone());

By default .clone won't copy events and data bound to an element, so that should be a dirty way to get rid of the tooltip. But again, see if your plugin has any built-in way to clean up.

score 0 · Answer 6 · answered Jan 22 '10 at 13:32

0

$("#id").tooltip({});

Have you tried that?

answered Jan 22 '10 at 13:32

mrvisser

924
5
9

How can I delete jquery object at runtime?

6 Answers6