CODEWITHSUNDEEP
jqueryhtmlcss
Uzair Vawda
Uzair Vawda

Reputation: 37

onClick remove class from div

html

    <div class="perWatchVideo" id="remove">
        <div class="controls">
            <input type="link" id="link" name="link" placeholder="Place Link here" class="linkInput">
            <button class="btn btn-primary loadVideo">Load Video!</button>
        </div>
    </div>
jquery
    $(document).ready(function(){
        $("loadVideo").click(function(){
            $("#remove").removeClass("preWachVideo");
        });
     });

Inside the div tags, I have created a class called perWatchVideo. When I click the button, I want to get rid of this class and replace it with the class postWatchVideo, a different class. How can I do this in jQuery?

Upvotes: 0

Views: 6398

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

First of all you forgot . before loadVideo to be $(".loadVideo") instead of $("loadVideo")

You need to use .addClass()

$(document).ready(function(){
    $(".loadVideo").click(function(){
      $("#remove").removeClass("preWachVideo").addClass('postWatchVideo');
    });
 });

or if you need to toggle classes on each click you can use toggleClass();

$(document).ready(function(){
    $(".loadVideo").click(function(){
       $("#remove").toggleClass("preWachVideo postWatchVideo");
     });
});

Note: ID suppose to be unique If you have more than one element with id="remove" your code will work just with the first #remove element

so you will need to change it from 

<div class="perWatchVideo" id="remove">

to 

<div class="perWatchVideo remove">

then your code should looks like this

$(document).ready(function(){
   $(".loadVideo").click(function(){
      $(this).closest(".remove").removeClass("preWachVideo").addClass('postWatchVideo');
   });
});

Upvotes: 4

Related Questions