Category: JavaScript Answers

To remove all li elements from a ul element with JavaScript, we can set the innerHTML property of the ul element to an empty string.

For instance, if we have:

<ul id='root'>
  <li>foo</li>
  <li>bar</li>
</ul>

Then we write:

document.getElementById("root").innerHTML = "";

to get the ul element with document.getElementById.

Then we get the innerHTML property and set it to an empty string.

Now we should see that the ul element is empty.

To validate YouTube URL with JavaScript regexes, we can use the following regex:

/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/

^ marks the start of the string.

(?:https?:\/\/)? checks for the protocol.

(?:www\.)? checks for the www part of the URL.

(?:youtu\.be\/|youtube\.com\/ checks for the youtube.com or youtub.be URLs.

(?:embed\/|v\/|watch\?v=|watch\?.+&v=) checks for the embed, watch, and v query strings.

((\w|-){11}) checks if the v query parameter value is 11 characters long.

(?:\S+)?$ checks for spaces at the end of the string.

Since the url is a valid YouTube URL, the console log should log true.

To check if a variable is a blob in JavaScript, we can use the instanceof operator.

For instance, we can write:

const myBlob = new Blob(['test text'], {
  type: 'text/plain'
});
console.log(myBlob instanceof Blob)

to create a blob with:

const myBlob = new Blob(['test text'], {
  type: 'text/plain'
});

We use the Blob constructor with the content for the blob as the first argument.

Then 2nd argument is an object with the type property to set the MIME type of the blob.

Then we use:

console.log(myBlob instanceof Blob)

to use the instanceof operator check if myBlob is a Blob instance.

To tell when an HTML5 audio element has finished playing with JavaScript, we can listen to the ended event emitted by the audio element.

For instance, we can write:

<audio id="music" controls src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"></audio>

to add the audio element.

Then we can listen to the ended event that’s emitted by the audio element when the audio finishes playing by writing the following JavaScript code:

document.querySelector("#music").addEventListener("ended", () => {
  console.log('ended')
});

We select the audio element with:

document.querySelector("#music")

Then we call addEventListener with 'ended' to listen to the ended event.

Then 2nd argument is the callback that runs when the audio finishes playing.

Now when the clip finishes playing, we should see 'ended' logged.

To deselect all values with the jQuery Select2 drop down, we can call the val and trigger methods on the Select2 drop downs.

For instance, if we have 2 select elements:

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


<div>
  <select id="select2">
    <option></option>
    <option>Some Text</option>
    <option>Other Text</option>
  </select>

  <select id="select3">
    <option></option>
    <option>Some Text</option>
    <option>Other Text</option>
  </select>
</div>
<button id="clear">clear</button>

Then we write:

$('select').select2({
  placeholder: "select me"
});

$("#clear").click(() => {
  $("select").each(function() {
    $(this).val(null).trigger('change');
  });
});

to select all drop downs with $('select').

Then we call select2 to convert them both to Select2 drop downs.

We call it with an object with the placeholder property set to set the placeholder of the drop down.

Next, we add a click event handler to the clear button with the $("#clear").click method.

We call it with a callback that calls each on all the select elements.

In the click event handler callback, we call each with a callback that calls $(this).val(null).trigger('change'); to set the value attribute of each drop down to null.

Then we call trigger to trigger the 'change' event on it.