jQuery tooltip: Trouble with remove()

I'm using a jQuery tooltip plugin.

I have HTML like this:

<li class="term ui-droppable">
    <strong>Fall 2011</strong>
    <li class="course ui-draggable">Biological Statistics I<a class="remove-course-button" href="">[X]</a></li>
    <div class="term-meta-data">
         <p class="total-credits too-few-credits">Total credits: 3</p>
         <p class="median-GPA low-GPA">Median Historical GPA:  2.00</p>
    </div>
</li>

I want to remove the .course element. So, I attach a click handler to the <a>:

function _addDeleteButton(course, term) {
    var delete_button = $('<a href="" class="remove-course-button" title="Remove this course">[X]</a>');
    course.append(delete_button);

    $(delete_button).click(function() {
        course.remove();
        return false;
    }).tooltip();
}

This all works fine, in terms of attaching the click handler. However, when course.remove() is called, Firebug reports an error in tooltip.js:

Line 282
tsettings is null

if ((!IE || !$.fn.bgiframe) && tsettings.fade) {
开发者_JS百科

What am I doing wrong? If the link has a tooltip attached, do I need to remove it specially?

UPDATE: Removing .tooltip() solve the problem. I'd like to keep it in, but that makes me suspect that my use of .tooltip() is incorrect here.

---

I had this same issue and ended up having to delay the call of .remove() to prevent the error. So something like the following may work for you:

$(delete_button).click(function() {
   setTimeout( function() { course.remove() } , 1);
   return false;
}).tooltip();

---

The .tooltip() plugin has several handlers that attach to the element, namely on mouseover, mouseout, and click. If you're removing the element, just .unbind() all these events so they don't run, like this:

delete_button.click(function() {
    course.unbind().remove();
    return false;
}).tooltip();

One other change to note is that delete_button is already a jQuery object, wrapping it in $() again just clones it :)

The error happens because it's trying to fetch and use it's settings data off the element after it's been though .remove() via jQuery.data(), in which jQuery removes it's data from the cache. This approach this just prevents all those tooltip handlers from running again, so it won't matter that the data's gone (as it should be), because nothing will be looking for it now.