Author: John Au-Yeung

Sometimes, we want to remove an element in an array with JavaScript.

In this article, we’ll look at how to remove an element in an array with JavaScript.

Use the Array.prototype.splice Method

We can use the JavaScript array splice method to remove an item from an array.

For instance, we can write:

const arr = [1, 2, 3]
arr.splice(1, 1)
console.log(arr)

to remove the item with index 1 from arr with splice .

The first argument of splice is the index of the item to remove.

And the 2nd argument is the number of items to remove starting from the index in the first argument.

Therefore arr is [1, 3] according to the console log.

Conclusion

We can remove an item from a JavaScript array with the JavaScript array’s splice method.

Sometimes, we want to check if a string has characters and whitespace and not just whitespace.

In this article, we’ll look at how to check if a string has characters and whitespace and not just whitespace.

Check if a String has Non-whitespace Characters

We can use the S pattern to check if a string has any non-whitespace characters.

For instance, we can write:

const myString = 'abc '

if (/S/.test(myString)) {
  //...
}

to check if myString has any non-whitespace characters with the regex test method.

It should return true since it has non-whitespace characters.

Use the String.prototype.trim Method

Another way to check if a string has non-whitespace characters is to use the JavaScript string’s trim method.

For instance, we can write:

const myString = 'abc '

if (!myString.trim()) {
  //...
}

If myString returns an empty string after calling trim on it, then it only has whitespaces.

Therefore, we can check if trim returns a falsy value to do the whitespace-only check since empty string is a falsy value.

Check if a String has Only Whitespace Characters

We can also check if a string only has whitespace characters.

To do this, we write:

const myString = 'abc '

if (/^s+$/.test(myString)) {
  //...
}

We call test with /^s+$/ to check if myString only has whitespace characters.

The ^ indicates the start of the string and $ indicates the end of the string.

s+ is the pattern for one or more whitespace characters.

So the regex checks if the whole string consists of whitespaces.

Conclusion

We can use various regex patterns or the trim method to check if a string has all whitespace or not.

Sometimes, we want to add an HTML table that has a scrollable body but with the header fixed in place.

In this article, we’ll look at how to add a table where the table body scrolls but the table header stays in place.

Create a Table That Has a Fixed Header

We can create an HTML table that has a fixed header with some CSS.

For instance, if we have the following table:

<table>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Then we can style it by writing the following CSS:

table {
  overflow: scroll;
  display: block;
  height: 120px;
}

thead>tr {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  top: 0;
  background-color: white;
}

tbody>tr:nth-of-type(1) {
  margin-top: 16px;
}

tbody tr {
  display: block;
}

td,
th {
  width: 70px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

We set the height of the table element to 120px to make restrict the height of it so we can make it scrollable.

To make it scrollable, we set the overflow CSS property to scroll .

Then we set the tr elements in the thead to absolute position so they stay in place.

Also, we set the tr elements in thead to a white background so that the elements below will be hidden when we scroll them.

Conclusion

We can make an HTML table with a scrollable body and a fixed header with some CSS styles.

Sometimes, we want to select an item with a class within a div with JavaScript.

In this article, we’ll look at how to select an item with a class within a div with JavaScript.

Use document.querySelector

We can use document.querySelector on to select a div and then select an element within it with the given class after that.

For instance, if we have the following HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Then we can select the div with the class myclass by writing:

const innerDiv = document
  .querySelector('#mydiv')
  .querySelector('.myclass')
console.log(innerDiv)

We just call querySelector on the element with the ID mydiv to select items inside that div.

Therefore, innerDiv is the div with the class myclass .

Use document.getElementById

We can replace the first querySelector call with getElementById .

For instance, if we have the following HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Then we can select the div with the class myclass by writing:

const innerDiv = document
  .getElementById('mydiv')
  .querySelector('.myclass')
console.log(innerDiv)

Then we see the same result as before.

Use document.getElementsByClassName

Also, we can use the getElementsByClassName method to get all the elements with the given class within an element.

For instance, if we have the following HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Then we can select the div with the class myclass by writing:

const [innerDiv] = document
  .getElementById('mydiv')
  .getElementsByClassName('myclass')
console.log(innerDiv)

We restructure the first div with the class myclass from the elements that are returned by getElementsByClassName .

And we get the same result as before.

Conclusion

We can get elements within an element with the element selection methods built into the browser.

Sometimes, we want to get the indexes of child nodes with JavaScript.

In this article, we’ll look at how to get the indexes of child nodes with JavaScript.

Use the Array.from Method

We can use the Array.from method to convert the node list object with the list of selected elements to an array.

Then we can use the array to get the index of the element.

For instance, if we have the following HTML:

<div>
  foo
</div>
<div>
  bar
</div>
<div>
  baz
</div>

Then we can get the divs and the indexes of them by writing:

const divs = document.querySelectorAll('div')
const arr = Array.from(divs)
for (const [index, div] of arr.entries()) {
  console.log(index, div)
}

We call document.querySelectorAll with the div.

Then we call Array.from with divs to convert the node list to an array.

Next, use the for-of loop with arr.entries to return an array with the arrays of the index of each div and the div object itself.

index has the index, and div has the div.

Use the Spread Operator

Another way to convert the node list into an array is to use the spread operator.

For instance, if we have the following HTML:

<div>
  foo
</div>
<div>
  bar
</div>
<div>
  baz
</div>

Then we can write:

const divs = document.querySelectorAll('div')
const arr = [...divs]
for (const [index, div] of arr.entries()) {
  console.log(index, div)
}

And we get the same result as before.

We just replaced Array.from with the spread operator.

Conclusion

To get the indexes of child elements with JavaScript, we convert the node list with the selected elements into an array.