jquery parent.html is not a function

Question

Complete newbie working with jQuery and am having a bit of a problem.

I have a table with some of the cells having a in them (never more than one select per cell).

In the following code select is the element that was passed to the function. I'm trying to get the parent so that I can remove the and replace it with some html.

function submit_pick( select ) {
    var parent = select.parent().get(0);      
    select.remove();
    jQuery("#testdiv").html(parent.tagName);
    parent.html(parent.tagName);
}

select.remove(); works as expected

jQuery("#testdiv").html(parent.tagName); also works as expected producing TD

parent.html(parent.tagName); does not work. Firefox's web console gives an error parent.html is not a function.

Answer 1

This is because you have done .get(0) which returns a DOM element, not a jquery object.

http://api.jquery.com/get/

you should use jQuery(parent) to be able to use the .html() method again.

Answer 2

.get(0) returns a native DOMElement and not jQuery object anymore, thus you need to wrap the parent inside $() (also the reason why html() is complained as not being a function, as html() belongs to jQuery object, not DOMElement):

jQuery(parent).html(parent.tagName);

Answer 3

Try:

jQuery(parent).html(parent.tagName);

Answer 4

get returns a dom element not a jquery object. try

var parent = select.parent().eq(0);      

eq gives you the jquery object at the index, which is what you wanted

Answer 5

parent is not a jQuery object anymore, you would have to use:

$(parent).html(parent.tagName);