What's the deal with the JQuery constructor? Also, I'm confused about the DOM tree. And, it looks like I don't know what the jQuery object is

Question

Assuming that is even the correct term, what's the deal with them?

jQuery("#removeUser", jQuery(myform)).click(
    function()
    {
        jQuery(this).parent().parent().remove(); 
    }); 

So, in the above code, there appears to be a need for 2 arguments in the constructor. The first parameter takes the id of an HTML element called "removeUser" and the other is actually var which is a string of a whole collection of HTML elements and their nested children.

Basically, what the above code does is remove a form when someone clicks the "removeUser" button. I copied the original code and modified it, and although it works (to some extent) I don't entirely understand what's happening here.

When I tried to create the new jQuery instance using only "#removeUser" element, I didn't get the results that I wanted. Instead of only removing one "user" it removed all of them. So, there's something happening here that I don't understand at all.

So, inside the function, who is "this"? Is it the removeUser element or is it the string? I'm so confused!

============

UPDATE:

So, based on Cory's and Torsten Walter's comment, I could give the jQuery "constructor" something like the following:

    jQuery("#removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button id=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        jQuery(this).parent().parent().remove(); 
    }
);

Or, the following, for those who don't like to use "jQuery":

    $("#removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button id=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

Also, I noticed that some people don't like my use of non-unique ID's, so I could have something like:

    $("button", "<tr name=parent1><td>User: </td><td name=parent2><button>remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

Since, every "user" only has one button anyways.

Also, some people suggest that I use a class instead. Along with the advice of NOT using the second argument, it wouldn't give me the results that I wanted.

    $(".removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button class=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

The above would remove all "users", which isn't what I want.

============

UPDATE:

Also, what I have with the "parent1" and "parent2" thing is wrong, right? It isn't actually accessing parent1 at all is it?

What I actually have for myform is the following:

var myform = "<table>"+ //<---parent 1, right?
                    "  <tr>" + //<--parent 2?
                    "     <td>User " + jQuerycountForms + ":</td>" + 
                    "     <td>UserID:&nbsp;</td>" + 
                    "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                    "     <td>Roles:&nbsp;</td>" + 
                    "     <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" + 
                    "     <td><button id=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + //Or, is that "td" parent2?
                    "  </tr><br/>"+
                    "</table>";

In my HTML I have something like the following:

<div id="container">
            <table>
                <tr>
        <td><button id="addUser" type="button">add</button></td>
                </tr>
            </table>
        </div>

What the "addUser" button does is it adds another user. There's some jQuery javascript which executes the adding of a new user attached to this element.

When I tried to get rid of the outer table element for the myform variable, I got a problem whenever I clicked the removed the user. What ended up happening was that I ended up removing the entire first table.

So, the following value for myform:

    var myform = "  <tr>" + //Now the "table" element shown earlier in the HTML is parent1!
                    "     <td>User " + jQuerycountForms + ":</td>" + 
                    "     <td>UserID:&nbsp;</td>" + 
                    "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                    "     <td>Roles:&nbsp;</td>" + 
                    "     <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" + 
                    "     <td><button id=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + 
                    "  </tr><br/>";

would cause there to be no more add button anymore.

So, who are removeUser button's parents? Which one is the closest parent, and who is the parent of that?

Since, it's Javascript, I can't actually see what changes are being made to the HTML. If this was Java rendering this, the changes would be reflected in the HTML source. But, with this, it's like I'm left with my imagination to figure things out. And, if you're not too familiar with Javascript then it can be kind of difficult to see what's happening.

============

UPDATE:

So, my guess as to what the HTML might look like after I click one user is:

        <div id="container">
            <table>
        <tr>
        <td><button id="addUser" type="button">add</button></td>
        <table> <!-- Well, I'm definitely the grand parent. -->
            <tr> <!-- But, am I anyone's parent? -->
                <td>User 0:</td>
                <td>UserID:&nbsp;</td>
                <td><input type='text' name='UserID[0]'></td>
                <td>Roles:&nbsp;</td>
                <td><textarea name='Roles[0]'></textarea></td>
                <td> <!-- Or, am I the daddy? -->
                    <button id=removeUser onclick="jQuerycountForms--;">remove</button>
                </td>
            </tr><br/>
                    </table>
                </tr>
            </table>
        </div>

So, basically, the second part of my question is, "Who is the first parent accessed (parent2)?" Is it the td or the tr element? Why doesn't it think that tr is a parent of td? It certainly looks like it is.

============

UPDATE:

This is in response to Cory's jsFiddle link (thanks, btw, that appears to be a useful tool). The following code showed the structure

var button = $('.removeUser');
alert("Me = " + button[0].tagName); //button
alert("Parent = " + button.parent()[0].tagName); // td
alert("Grand-Parent = " + button.parent().parent()[0].tagName); // tr
alert("Great Grand-Parent = " + button.parent().parent().parent()[0].tagName); // tbody
alert("Great, Great Grand-Parent = " + button.parent().parent().parent().parent()[0].tagName); // table

So, let me get this straight. If this were a real OOP kind of language, then we'd have something like the following:

Jquery button = new Jquery('.removeUser');

This jQuery "class" would really be a collection of some kind, but, apparently, with only one member in it? The single member has attributes such as "tagName" along with other attributes.

However, the jQuery class itself has methods which allow the user to navigate the DOM tree (relative to the root of this tree).

I figured out that if I had two "removeUser" buttons, then I could use an array notation for button[1] as well. But, of course, you can't have more than one parent so anything with parent()[1] wouldn't work.

Ordinarily, I would have assumed that jQuery owned the "tagName" property, but it looks like that isn't the case. Instead, that property belongs to this array's member. Anyways, how do I look up what attributes that these array members own?

Answer 1

$(foo, bar) is more or less just syntatic sugar for $(bar).find(foo). $(bar) itself has three quite different meanings depending on the type of bar:

• if bar is a function, run it as soon as the document loaded;
• if it is a string with HTML tags in it, create a DOM fragment (basically a piece of a web page, but not attached to the current page, just floating in the air) out of it
• otherwise treat it as a selector and try to find matching elements on the current page.

So what $("#removeUser", "<tr>...</tr>").click(...) does is create a new tr element with the given contents, select the element with the right id from inside it, and attach a click handler to it. Unless you later append the element to the current page, this will have no effect whatsoever, as you are doing staff to a detached element which is not part of the page.

Answer 2

The this inside the function() { } is the element that was clicked. Since you've bound the click event to an element with the id "removeUser", that's the element to which this will refer in the click event handler. jQuery(this).parent().parent() is likely grabbing the form element, but that depends on how your form is built and where the "removeUser" element is within the form.