It is very easy to empty a string in JavaScript. All you have to do is set the string to an empty string.

var someString = "This is some text";
someString = "";

To empty the string, someString, in the code above, we just have to set the variable to an empty string, someString = “”;.

This is the easiest way to empty a string in JavaScript.

Let’s take a very quick look at this in action below.

Empty a String in JavaScript with a Click

In this simple example, we will start by having a long string of color names. We will provide the user a button to then empty the string.

Here is the HTML setup:

Clear string above

First we will show the string of colors to the user using the textContent property.

We will attach an onclick event to our button and run a simple function when the user clicks it.

In the function, we will simply empty the string as shown above, and update the string showing the empty string to the user.

Here is the JavaScript code for emptying a string:

var colors = "AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGrey, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen";

//Show the string of colors to the user
document.getElementById("p1").textContent = colors;

function clearString(){
  //Empty the string of colors
  colors = "";
  //Update the string for the user
  document.getElementById("p1").textContent = colors;

The final code and output for this example is below:

Code Output:

Clear string above

Full Code:

Clear string above

Hopefully this article has helped you to understand how to empty a String in JavaScript.

Categorized in:


Last Update: May 3, 2024