Clear img src Attribute Using JavaScript

While designing an interactive web page or site, there can be a requirement to transition between various elements from time to time. For instance, in the process of adding captcha and image recognition techniques or hiding a particular element for the appropriate utilization of the Document Object Model(DOM). In such cases, clearing img src attribute is beneficial in ensuring the accessible document design and making the site stand out.

This blog will explain how to clear the image src attribute using JavaScript.

How to Clear img src Attribute Using JavaScript?

To clear the img src attribute using JavaScript, the following approaches can be utilized:

• • “removeAttribute()” method.
  • “display” property.
  • “visibility” property.

Let’s follow each of the approaches one by one!

Approach 1: Clear img src Attribute in JavaScript Using removeAttribute() Method

The “removeAttribute()” method removes the attribute from an element. This method can be utilized to clear a particular attribute resulting in removing the specified image upon the button click.

Syntax

 
In the given syntax:

• • “name” refers to the attribute’s name.

Example

Let’s follow the below-stated example:

 
In the above code snippet:

• • Specify the stated image having the specified “id” and the “src” attribute.
  • Also, create a button with an attached “onclick” event invoking the clearAttribute() function.
  • In the JavaScript code, define a function named “clearAttribute()”.
  • In its definition, access the included image via “id” using the “getElementById()” method.
  • Finally, apply the “removeAttribute()” method to remove the “src” attribute, which will result in clearing the image upon the button click.

Output

The above output signifies that the image specified in the “src” attribute clears upon the button click.

Approach 2: Clear img src Attribute in JavaScript Using display Property

The “display” property returns the display type of the associated element. This property can be utilized to assign a value to the corresponding element such that the contained attribute is cleared upon the button click.

Syntax

 
In the given syntax:

• • “value” refers to the assigned value to the display property.

Example

Let’s overview the following example:

 
In the above lines of code, implement the following steps:

• • Recall the approaches for including an image via the “src” attribute and creating a button having an “onclick” event.
  • In the JavaScript code, define the function “clearAttribute()”.
  • In its definition, similarly, access the included image using the “getElementById()” method.
  • Lastly, assign the value “none” to the display property. This will result in clearing the image specified in the “src” attribute.

Output

The above output indicates that the desired functionality is achieved.

Approach 3: Clear img src Attribute in JavaScript Using visibility Property

The “visibility” property assigns the value such that an element becomes visible or not. This property can be implemented to hide the associated element, thereby disabling the image specified in the “src” attribute within the element.

Syntax

 
In the above-given syntax:

• • “value” points to the assigned value to the associated element.

Example

The below-given example illustrates the stated concept:

 
In the above lines of code:

• • Likewise, specify the stated image having the specified “id” and the “src” attribute.
  • Also, associate an “onclick” event with the created button redirecting to the clearAttribute() function.
  • In the JavaScript part of the code, define a function named “clearAttribute()”.
  • Here, similarly, access the included image using the “getElementById()” method.
  • Finally, assign the value “hidden” to the associated element, i.e., image.
  • This will resultantly hide the image specified in the “src” attribute, thereby clearing it upon the button click.

Output

The specified image is cleared from DOM upon the button click, thereby clearing the “src” attribute.

Conclusion

The “removeAttribute()” method, the “display” property, or the “visibility” property can be applied to clear img src attribute using JavaScript. The removeAttribute() method can be utilized to remove the ”src” attribute which will result in clearing the specified image in it as well. The display property hides the display thereby clearing the image upon the button click. The visibility property hides the associated element resulting in clearing the contained “src” attribute as well. This blog is guided to clear the img src attribute in JavaScript.