How to Hide an HTML Element in Mobile View using jQuery ?
Suppose we have given an HTML document and the task is to hide an HTML element in mobile view with the help of jQuery.
- Initially, we are required to detect whether our system is ‘Mobile’ or not, for that window.navigator.userAgent property is used. It returns a string containing information about the name, version, and platform of the browser. So, using this string we can detect our system.
- In order to hide HTML elements hide() method is used.
- Here, in our code, we are going to hide a column of a table in the mobile view. In the desktop view of the table, we have four different columns with table headings as GFG UserHandle, Practice Problems, Coding Score, and GFG Articles.
- In the mobile view, we are going to hide the Practice Problems column by getting elements using their class names.
Mobile view: In the mobile view, the practice problems column is successfully now.