jQuery — Queues and Removing Items

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.queue()

The .queue() method shows the queue of functions to be executed on the matched elements.

For example, if we have:

<p>The queue length is: <span></span></p>
<div></div>

Then we can show the number of queued items by writing:

const div = $("div");

function runIt() {
  div
    .show("slow")
    .animate({
      left: "+=200"
    }, 2000)
    .slideToggle(1000)
    .slideToggle("fast")
    .animate({
      left: "-=200"
    }, 1500)
    .hide("slow")
    .show(1200)
    .slideUp("normal", runIt);
}

function showIt() {
  const n = div.queue("fx");
  $("span").text(n.length);
  setTimeout(showIt, 100);
}

runIt();
showIt();

The queue method with 'fx' gets the number of queued items for animations.

:radio Selector

The :radio selector lets us get radio button eleements.

For example, if we have:

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="password">
  <input type="radio" name="asdf">
  <input type="radio" name="asdf">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>

Then we can add a background and border to a radio button by writing:

$("form input:radio")
  .wrap("<span></span>")
  .parent()
  .css({
    background: "yellow",
    border: "3px red solid"
  });

.ready()

The ready method specifies a function to run when the DOM is fully loaded.

We can write:

$(document).ready(function() {
  // Handler for .ready() called.
});

or:

$(function() {
  // Handler for .ready() called.
});

We run code in the callback when document is loaded.

.remove()

The .remove() method lets us remove a set of matched elements in the DOM.

For example, if we have:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Then we remove the div with the class hello by writing:

$(".hello").remove();

.removeAttr()

The .removeAttr() method removes an attribute from each element in the set of matched elements.

For example, if we have:

<input type="text" title="hello there">
<button>Change title</button>

Then we can toggle the title attribute on and off when we click the button by writing:

const inputTitle = $("input").attr("title");
$("button").click(function() {
  const input = $(this).next();
  if (input.attr("title") === inputTitle) {
    input.removeAttr("title")
  } else {
    input.attr("title", inputTitle);
  }
});

.removeClass()

We can call the .removeClass() method to remove one or more classes on an element.

For example, if we have:

<p class="blue under">Hello</p>

Then we can remove the blue and under classes by writing:

$("p").removeClass("blue under")

.removeData()

The .removeData() method to remove a previously-stored piece of data.

For example, if we have:

<div>hello</div>

Then we can add data to the div and remove it by writing:

$("div").data("test1", "value");
console.log($("div").data("test1"));
$("div").removeData("test1");
console.log($("div").data("test1"));

We call removeData to remove a piece of data by its key.

.removeProp()

We can use the removeProp propety for the set of matched elements.

For example, if we have:

<p></p>

Then we can add a property and remove it by writing:

const para = $("p");
para
  .prop("code", 1234)
  .append(String(para.prop("code")))
  .removeProp("code")
  .append(String(para.prop("code")));

The first argument is the property name.

And the 2nd argument is the value of it.

removeProp takes the name of the property we want to remove.

Conclusion

We can get queued items and remove classes and properties with jQuery.