CODEWITHSUNDEEP
javascriptjquery
Dan
Dan

Reputation: 57881

How can I delete jquery object at runtime?

$("#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"

Upvotes: 1

Views: 13144

Answers (6)

thmascrown
thmascrown

Reputation: 1

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

Upvotes: 0

bjelli
bjelli

Reputation: 10070

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>

Upvotes: 2

Reigel Gallarde
Reigel Gallarde

Reputation: 65254

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");

Upvotes: 0

mrvisser
mrvisser

Reputation: 944

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

Have you tried that?

Upvotes: 0

Parrots
Parrots

Reputation: 26882

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.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382666

How about using this:

delete (object_here);

This will remove the javascript objects.

Upvotes: 0

Related Questions