How to remove CSS “top” and “left” attribute with jQuery ? Last Updated : 13 Dec, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report Method 1: Using the css() method: The css() method is used to get or set CSS properties of a selected element. It takes two arguments, the first argument is the property that has to be set and the second argument is the value that it has to be set to. The 'top' value can be effectively disabled by using the 'initial' value which would set the property to its default value. This is similarly done with the 'left' value. This will remove the effect of the 'top' and 'left' values in the element. Syntax: javascript function removeTopLeft() { $('selectedElement').css('top', 'initial'); $('selectedElement').css('left', 'initial'); } Example: html <!DOCTYPE html> <html> <head> <title> How to Remove CSS "top" and "left" attribute with jQuery? </title> <style> .box { position: absolute; top: 250px; left: 200px; height: 100px; width: 100px; background-color: green; } </style> <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script> </head> <body> <h1 style="color: green"> GeeksForGeeks </h1> <b> How to Remove CSS “top” and “left” attribute with jQuery? </b> <p> Click on the button to remove the top and left attribute. </p> <button onclick="removeTopLeft()"> Remove top and left </button> <div class="box"></div> <script type="text/javascript"> function removeTopLeft() { $('.box').css('top', 'initial'); $('.box').css('left', 'initial'); } </script> </body> </html> Output: Before clicking the button: After clicking the button: Method 2: Using the top and left properties: The top and left value can be changed by accessing these properties with the help of the style property of the element. The required element is first selected using a jQuery selector. The style property and its 'top' and 'left' values are then accessed using the dot notation on the selected object. The 'top' value can be effectively disabled by using the 'initial' value which would set the property to its default value. It is similarly done with the 'left' value. This will remove the effect of the 'top' and 'left' values in the element. Syntax: javascript function removeTopLeft() { $('selectedElement')[0].style.top = "initial"; $('selectedElement')[0].style.left = "initial"; } Example: html <!DOCTYPE html> <html> <head> <title> How to Remove CSS "top" and "left" attribute with jQuery? </title> <style> .box { position: absolute; top: 250px; left: 200px; height: 100px; width: 100px; background-color: green; } </style> <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script> </head> <body> <h1 style="color: green"> GeeksForGeeks </h1> <b> How to Remove CSS “top” and “left” attribute with jQuery? </b> <p> Click on the button to remove the top and left attribute. </p> <button onclick="removeTopLeft()"> Remove top and left </button> <div class="box"></div> <script type="text/javascript"> function removeTopLeft() { $('.box')[0].style.top = "initial"; $('.box')[0].style.left = "initial"; } </script> </body> </html> Output: Before clicking the button: After clicking the button: Comment More infoAdvertise with us Next Article How to remove all attributes of an HTML element using jQuery ? S sayantanm19 Follow Improve Article Tags : Web Technologies JQuery jQuery-Misc Similar Reads How to Add and Remove HTML Attributes with jQuery? Using jQuery, we can dynamically add and remove HTML attributes such as placeholder, style, and more to enhance the interactivity and functionality of web elements based on user actions. We will explore two different approaches to adding and removing HTML attributes with jQuery. Below are the possib 2 min read How to remove an attribute from each matched elements using jQuery ? In this article, we will learn how to remove an attribute from each of the matched elements using JQuery. JQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript 2 min read How to remove all attributes of an HTML element using jQuery ? In this article, we will see how to remove all attributes of an HTML element using jQuery. To remove all attributes of elements, we use the removeAttributeNode() method and .removeAllAttributes(). Syntax: $.fn.removeAllAttributes = function() { return this.each(function() { $.each(this.attributes, f 1 min read How to remove all CSS classes using jQuery ? In this article, we will remove all CSS classes for an element using jQuery. To remove all CSS classes of an element, we use removeClass() method. The removeClass() method is used to remove one or more class names from the selected element. Syntax: $(selector).removeClass(class_name, function(index, 2 min read How to set attribute without value using jQuery ? There are many ways to set attributes without value using jQuery. jQuery prop() method is used to get or set the values of attributes. To change the properties like checked, default checked, disabled, selectedIndex, default selected and selected state of Document Object Model, use the jQuery .prop() 2 min read How to add and remove CSS classes to an element using jQuery ? In this article, we will see how to add or remove the CSS classes to an element using jQuery. To add the CSS classes to an element we use addClass() method, and to remove the CSS classes we use removeClass() method. Syntax: The syntax for adding CSS classes to an element: $('selector').addClass(clas 2 min read Like