Author: John Au-Yeung

Sometimes, we want to remove objects from array by object property with JavaScript.

In this article, we’ll look at how to remove objects from array by object property with JavaScript.

How to remove objects from array by object property with JavaScript?

To remove objects from array by object property with JavaScript, we call array map with to get the values of the property in each object.

And then we get the index of it with indexOf and call splice to remove the item at the given index in the original array.

For instance, we write

const removeIndex = array.map((item) => item.id).indexOf("abc");
array.splice(removeIndex, 1);

to call array.map to get the value of the id property in each item in array.

Then we get the index of the first item with id 'abc' with indexOf.

Next, we call array.splice with the removeIndex and 1 to remove the item in array at removeIndex in place.

Conclusion

To remove objects from array by object property with JavaScript, we call array map with to get the values of the property in each object.

And then we get the index of it with indexOf and call splice to remove the item at the given index in the original array.

Sometimes, we want to fix scrollIntoView() causing the whole page to move with JavaScript.

In this article, we’ll look at how to fix scrollIntoView() causing the whole page to move with JavaScript.

How to fix scrollIntoView() causing the whole page to move with JavaScript?

To fix scrollIntoView() causing the whole page to move with JavaScript, we can call scrollIntoView with a few options.

For instance, we write

element.scrollIntoView({
  behavior: "smooth",
  block: "nearest",
  inline: "start",
});

to call scrollIntoView with an object that jumps to the nearest block element with block set to 'nearest'.

And we jump to the start of the inline element with inline set to 'start'.

Conclusion

To fix scrollIntoView() causing the whole page to move with JavaScript, we can call scrollIntoView with a few options.

Sometimes, we want to add div element to body or document in JavaScript.

In this article, we’ll look at how to add div element to body or document in JavaScript.

How to add div element to body or document in JavaScript?

To add div element to body or document in JavaScript, we can use the createElement and appendChild methods.

For instance, we write

const elem = document.createElement("div");
elem.style.cssText = `
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  z-index: 100;
  background: #000;
`;
document.body.appendChild(elem);

to create a div with createElement.

Then we set the CSS styles of the div to

`
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  z-index: 100;
  background: #000;
`

Then we append the div as a child of the body element woth

document.body.appendChild(elem);

Conclusion

To add div element to body or document in JavaScript, we can use the createElement and appendChild methods.

Sometimes, we want to delete cookie by name with JavaScript.

In this article, we’ll look at how to delete cookie by name with JavaScript.

How to delete cookie by name with JavaScript?

To delete cookie by name with JavaScript, we set document.cookie to a string that has the name of the cookie followed by the expiry date.

For instance, we write

const deleteCookie = (name) => {
  document.cookie = name + "=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
};

to add 'Expires=Thu, 01 Jan 1970 00:00:01 GMT;' after name to set the expiry date of the cookie with name to the past to remove it in the deleteCookie function.

Conclusion

To delete cookie by name with JavaScript, we set document.cookie to a string that has the name of the cookie followed by the expiry date.