Using plain JavaScript (without any additional libraries like jQuery), you can eliminate a class from an element

I'm attempting to locate an element by its class name, and then remove the class from it.

My goal is to achieve this using pure JavaScript, without relying on jQuery.

Here is my current approach:

<script>
  var changeController = function() {
    var removeClass = document.getElementsByClassName("selected-hr")[0];
    removeClass.classList.remove("selected-hr");
  }
</script>

<div class="col col-25 selected-hr">
  <a class="tb-header-link" onclick="changeController()">ALL</a>
</div>

EDIT 1: Fixed typo in changeController() method.

javascripthtmlcss

Answer №1

Make sure to pass this as a parameter into the function changeController(). Utilize the parentNode property to access the referring div. Remember to place any script tags after your HTML markup to guarantee that the DOM is fully loaded before executing the script, ideally right before the closing </body> tag.

Sample Code

a {text-decoration: none;}
.selected-hr {background: tomato;}
<div class="col col-25 selected-hr">
  <a href='#/' class="tb-header-link" onclick="changeController(this)">ALL</a>
</div>

<script>
  function changeController(ele) {
    var parent = ele.parentNode;
    parent.classList.remove("selected-hr");
  }
</script>

Answer №2

Merely stating the name of a variable serves no purpose (even if the variable is assigned to a function).

You must invoke it in order to perform any actions. Include ().

onclick="runFunction()"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Evaluation of jQuery code

Just starting out with jQuery and programming in general. I posted my first hour of work here and would appreciate some feedback on how to improve it. $(function() { function hideElements() //Hides specified elements on page load. { $("li.credentia ...

javascriptjquery

Please explain the display property used in Bootstrap input groups

I have been working on implementing a button that toggles the visibility of a datepicker when clicked. <a class="btn btn-primary btn-lg mr-5" href="../Stores/stalls.html">Check Current Operating Stalls </a> <div style="vertical-align: t ...

htmlcssbootstrap-4

What is the best approach for fetching a refined selection of items from an array of IDs using GraphQL?

If I have a list of products stored in my database, it might look something like this items: [ { id: '001', name: 'Product 01', description: 'Awesome product' price: 50.00 }, { ...

javascriptgraphql

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Unable to get the toggle function working on child nodes. Can someone assist me with this issue? $(document).ready(function() { $('label.tree-toggler').click(function() { $(this).parent().children('ul.tree').toggle(300); }); ...

javascriptjqueryhtmlcss

Tips for using Howler library in React to automatically play audio upon loading the page

I'm troubleshooting why the audio on my webpage won't start playing when the page loads, and instead only plays after a mouse click triggers an event. The audio works fine but I want it to automatically play as soon as the page is loaded. import ...

javascriptreactjshowler.js

What is the best way to incorporate an exported TypeScript class into my JavaScript file?

One of my JavaScript files is responsible for uploading a file to Microsoft Dynamics CRM. This particular JavaScript file makes use of RequireJS to reference another JavaScript file. The referenced JavaScript file, in turn, was compiled from multiple Typ ...

javascripttypescriptmodulerequirejs

Insert a record at the start of a data grid - JavaScript - jQuery

What is the most effective way to use jQuery for adding a new row at the top of a table? Here is an example table structure: <table id="mytable" cellpadding="0" cellspacing="0"> <tr> <td>col1</td> ...

javascriptjquery

Is it the right time to dive into HTML5 & CSS3?

The excitement around HTML5 and CSS3 is hard to ignore. But when is the right time to start incorporating them into our projects? How close are we to fully utilizing their capabilities? Update: I'm not interested in following the principles of: Grac ...

htmlcss

How can I restrict the number of characters per line in a textarea using javascript or jQuery?

Is there a method to control the number of characters per line in a textarea? For example, on lines 1-3 of the textarea, only 20 characters can be entered, while on subsequent lines, up to 50 characters are allowed. The current structure of the textarea l ...

javascriptjqueryhtmlcss

Utilizing Material-UI Select for creating a number range dynamically

Seeking a solution to create a select element using material-ui that offers a range of numbers from 0 to 20,000,000 in increments of 25,000. Currently, I have accomplished this using a for loop. for (let price = 0; price <= 20000000; price = price + 250 ...

javascriptreactjsmaterial-ui

Disable the time selection feature in the text input field

Despite seeing the same question asked before for this issue, I am looking for a solution that does not involve replacing the textbox with the same ID. When Timepicker is selected in the dropdown menu timepicker, it should activate in the textbox (which i ...

javascriptjqueryhtmlbootstrap-timepicker

What is the best way to add query parameters to router.push without cluttering the URL?

In my current project, I am using NextJS 13 with TypeScript but not utilizing the app router. I am facing an issue while trying to pass data over router.push to a dynamically routed page in Next.js without compromising the clarity of the URL. router.push({ ...

javascriptreactjstypescriptnext.jsreact-hooks

Different conversations are taking place concurrently. How can we determine which one is currently being attended to

In my application, multiple dialogs are open simultaneously, each with its own set of shortcuts. It is important to ensure that these shortcuts work correctly based on the focused dialog. Is there a way to determine which dialog is currently in focus? Ed ...

javascriptangulardialogprimeng

Performing ad-hoc queries on a Postgresql database using Node.js and Express to manipulate row data

I am faced with a challenge of selecting one entry randomly from a table containing 46 entries, and then passing the data from that particular query to my handlebars files. I am unsure about how to approach the task of randomly querying the database and re ...

javascriptnode.jspostgresqlexpresshandlebars.js

What steps should I take to ensure that the array yields the correct output?

Why is my code not creating an array of [0, 1, 2] when I pass the number 3 as a parameter? const array = [0]; const increment = (num) => { if (num > 0) { increment(num - 1); array.push(num); } return; }; console.log(array); incremen ...

javascript

Accessing a specific child div within a parent div using JavaScript and CSS

Struggling to target and modify the style of the child div within id="videoContainer" <div id="videoContainer"> <div style="width: 640px; height: 360px"> <------- this is the target <video src ...

javascripthtmlcssecmascript-6

How to style tables in CSS with specific border spacing inside cells

I've been struggling with this issue for months now and even Google hasn't been able to provide a solution. My problem is that I want to add spacing between <td> and <th> tags in a table, but whenever I do, the spacing appears on the ...

csshtml-table

Challenge with Filter Functionality when Activating Button

Can you help me implement a search filter using buttons with the Isotope Plugin? For example, entering a search value in an input field and then clicking a search button to display the search results. How can I achieve this using buttons? Below is the H ...

javascripthtmlcss

Is getElementById in JavaScript reliable for multiple calls?

I am attempting to create a table cell that transforms into a textbox upon clicking, allowing for input to be entered and then displayed in the cell. Below is my JavaScript function: $(".cellConsigne").click(function () { var numId = this.id.substrin ...

c#javascriptjqueryasp.net

"Efficiently handle JSON and binary data passing with the enhanced functionality of Express Body Parser

Within my express app router, I have routes set up to handle both POST requests with JSON data and binary data. The issue arises when I use body parser to parse the JSON data, as it incorrectly interprets the binary data as JSON and causes errors during th ...

javascriptnode.jsexpressmiddlewarebody-parser