What is this jQuery function in pseudo code?

Question

I am new to programming and trying to get a better understanding of how jQuery functions work. Could someone explain this code snippet to me in pseudocode? Also, is the formatting of 2 spaces correct or is it more common to use 4?

 $('#RemoveLastAuthor').click(function(e){
   $('.author-remove-group').last().prev('.form-group').remove();
   $('.author-remove-group').last().remove();
   if (num != 2){
     num--;
   }
  });

Answer 1

If you work in a team, you should follow the coding-standard regarding indentations, if you work alone, then you should do, what is more readable for you. I prefer 4 spaces (no tabs), but that is up to you in the first place.

The code below does this (verbatim, instead of pseudocode):

Select element with id RemoveLastAuthorand bind a click-handler to it (when that element is clicked, the function will be called).

$('#RemoveLastAuthor').click(function(e){

Then select all elements with class author-remove-group

$('.author-remove-group')

From those, select last child element:

.last()

Then, from all those (last) elements select the the previous one, but only if it has class form-group

.prev('.form-group')

Then remove those elements from the DOM:

.remove();

Next, select all elements with class author-remove-group:

$('.author-remove-group')

then select the last child element from each:

.last()

and remove those elements from the DOM:

.remove();

So I assume, that this callback removes the last author from a list of authors. If you have the HTML code then it would be easier to pinpoint the elements. It is a good bet, that there is only one element selected for each of the queries, but basically jQuery can select and work on multiple elements.

Hope that helps

Answer 2

This is not pseudo code but I'll try to explain what it does with comments:

//On clicking event of the element with id 'RemoveLastAuthor' run the anonymous function
    $('#RemoveLastAuthor').click(function(e){
              //Select all the elements with the css class 'author-remove-group', get the last item and then get the immediately preceding element with the class 'form-group' and remove it.
              $('.author-remove-group').last().prev('.form-group').remove();
              //Remove the last item found with the class 'author-remove-group'                  
              $('.author-remove-group').last().remove();
                   if (num != 2){
                     num--;
                   }
});

Please take a look at the documentation:

.prev()

.last()

.remove()

Answer 3

1; $('#RemoveLastAuthor').click(function(e){
2;    $('.author-remove-group').last().prev('.form-group').remove();
3;    $('.author-remove-group').last().remove();
4;    if (num != 2){
5;      num--;
6;    }
7; });

Alright as you can see I numbered the lines of the code to explain what it does line by line so here we go! This is JS using JQuery JQuery is just a library/extension for JavaScript

firstly: "$()" is a JQuery Selector
line:
1; You are selecting an element from your html with the id of "RemoveLastAuthor" and assigning an click event handler to it so when you click it will call the function inside the brackets of the .click() method.

function(e){
    //this function is called when the element with the id of RemoveLastAuthor is clicked
} 

2; So when that event function is called the following happens

• Using the JQuery Selector your select an element with the CLASS of "author-remove-group"
• With that object selected you are accessing a method that returns the last DOM element in the element selected.
• then with .prev('.form-group') you are getting the previous element filtered by a class selector of "form-group" from the bottom up.
• lastly on this line you remove the element from the document

3; You should understand what this line does except instead of finding a previous element from the bottom up now its selecting the last element and deleting it

4; don't ask me where its getting the variable num from but its checking to see if its not equal to 2

5; it decrements num if num is not equal to 2

6; closing curly bracket for the if statement
7; closing curly bracket and parenthesis for the event function and JQuery Selector method

function(e) {

} <-- this is in line 7 for the unnamed function

Now I will re write the JQuery snippet to possibly be more understandable

//This is now a named function
function clickEventHandler(e){
    //select another element and remove a child in it
    $('.author-remove-group').last().prev('.form-group').remove();
    //select previous element and remove the last element in it
    $('.author-remove-group').last().remove();
    //random if statement that has nothing to do with the JQuery code
    if (num != 2){
        num--;
    }
}
//Select element with id
$('#RemoveLastAuthor').click(clickEventHandler(e));

I hope my book helped you understand something about JQuery if you'd like me to re-write the snippet in a specific language such as regular JS by selecting DOM elements I can do that.

Its more common to use 4 space or actual TAB character - but its JavaScript its modular and hackable which is the beauty about it.

Anyways feel free to comment if you need any clarification
EDIT: JQuery API docs are a real life saver most times.

Cheers,
Demetry