jQuery interview questions

Want to become an expert in cracking jQuery interview questions?

Start with practicing the questions below. Whether a question involves multiple choice or live coding, we will give you hints as you go and tell you if your answers are correct or incorrect.

After that, take our timed public jQuery interview questions test.

To use our service for testing developers, purchase one of the paid plans for companies.


1. Image Gallery
jQuery DOM manipulation JavaScript Public

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div class="image">
  <img src="https://goo.gl/2oZU2S" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="https://goo.gl/tniGAc" alt="Second">
  <button class="remove">X</button>
</div>

Implement the registerClickHandler function that registers a click event handler and implements the following logic: When the button of class remove is clicked, its parent <div> element should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div class="image">
  <img src="https://goo.gl/tniGAc" alt="Second">
  <button class="remove">X</button>
</div>
Easy  
10min
Solve question

2. Product Code
jQuery Event handling Forms JavaScript Selectors Public

The createProductCodeForm function is used to create a new form that accepts a product code from a user.

The current version of the form contains the hint: 'The product code can be found on the label'. This hint is currently always visible to the user.

Improve the form so that the hint is only rendered when the input element is the focused element.

Easy  
15min
Solve question

3. Endangered Species
jQuery JavaScript Selectors Public

An HTML div element contains lists of endangered species grouped by continent and the species population status.

<div>
    <ul data-continent="North America">
        <li data-species="California condor">Critically Endangered</li>
        <li data-species="American bison">Near Threatened</li>
    </ul>
    <ul data-continent="Europe">
        <li data-species="Cave bear">Extinct</li>
    </ul>
</div>

Write a function that returns how endangered a species is on a particular continent. For example endangeredSpecies('North America', 'American bison') would return 'Near Threatened'.

Hard  
5min
Solve question

4. Closest Relative
jQuery JavaScript Selectors Public

The following XML represents a family tree:

<James>
    <Dave></Dave>
    <Mike></Mike>
    <Sarah></Sarah>
</James>

Implement the closestRelative function so that it returns the parent's closest relative whose name matches the relativeName and obeys the following rules:

  • The parent parameter is a jQuery selector of which the closest relative will be a descendant.
  • Each member of the family, including children, may also be a parent to one or more children.
  • Children are more closely related to the parent than grandchildren.
  • If several children in the same generation have the same name then the first child in the tree is considered the closer.
  • If no matching relative is found the function should return an empty jQuery object.

For example, closestRelative($('James'), 'Mike') should return the jQuery object wrapping <Mike></Mike>.

Hard  
15min
Solve question

If you feel ready, take one of our timed public jQuery interview questions tests:
  • HTML/CSS and JavaScript with jQuery online test ( Easy  /  Hard )
  • HTML/CSS, JavaScript with jQuery, and Bootstrap online test ( Easy  /  Hard )
  • JavaScript with jQuery online test ( Easy  /  Hard )
Not exactly what you are looking for? Go to our For developers section.