Can't remove a class with javascript

[egoicantero]

Hi everyone,

I have a little script just to add or remove a class. When the class have to bee added there is no problem, but when it has to remove it the following mistake is shown:

TypeError: d.removeClass is not a function

I don’t understand why. My JS code is the following:

    <script>
    function myFunction(respuesta_id) {
         let heart;
         var id_respuesta = respuesta_id;
         var d = document.getElementById(id_respuesta);

         if( $('#corazon').prop('checked') ) {
           heart = 1;
           d.className += " no_me_gusta";
         } else {
           heart = 0;
           d.removeClass("no_me_gusta");
         }
         console.log(id_respuesta);
         console.log(heart);


         $.ajax ({
           type: 'POST',
           url: 'proces_like.php',
           data: { "corazon": heart, "id_respuesta":id_respuesta },
           success:function(datos){
             $("#resultado").html(datos);
           }
         });

       };
    </script>

And the part of the HTML for that script:

                        echo "<div class='botones_post'>";
                            echo "<p id='resultado'></p>";
                            echo "<form class='corazon_like' name='like' id='heart' title='Me gusta el post' action='foro.php?foro=Xbox%20One&subforo=General&hilo=Vamos%dale&ID=1' method='post'>";
                                echo "<input type='checkbox' id='corazon' name='corazon'>";
                                echo "<label id='" . $respuestas['ID'] . "'  class='fa fa-heart' onclick='myFunction($respuesta_id)' for='corazon'></label>";
                            echo "</form>";
                            echo "<a href='#' title='Borrar post'><i class='fa fa-trash' aria-hidden='true'></i></a>";
                            echo "<a href='#' title='Reportar post'><i class='fa fa-ban' aria-hidden='true'></i></a>";

                        echo "</div>";

[mawburn]

Your var d needs to be a jQuery object.

var d = $('#' + id_respuesta);

(If you saw my previous reply, I missed that you were using jQuery)

[Dormilich]

Alternately, if you don’t use jQuery, there is the classList property for that: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

[liontas76]

You can try with d.className=‘’; .As you see I set an empty string at method className.At your statement you mixed JQuery anb Js in one line of code.Additionally the removeclass method if it not wotks then you can use
d.attr(‘class’,‘’);As you see I assign an empty string at class atrr

[Dormilich]

@liontas76

You can try with d.className=‘’;

That would delete all class names, not only the added one.

@liontas76

Additionally the removeclass method if it not wotks then you can use d.attr(‘class’,‘’);

nope. attr() also works only on jQuery, not on DOM. as can be clearly seen in the error message.

[mawburn]

At your statement you mixed JQuery anb Js in one line of code.

jQuery is just a JavaScript library. I set the jQuery object reference to a JavaScript variable, which would fix the OP’s problem. He’s trying to apply jQuery methods on a DOM object.

---

If you want to go a non-jQuery route, then You Might Not Need jQuery recommends the classList approach mentioned by @Dormilich:

IE8+

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

IE10+

el.classList.remove(className);

YMNjQ is a good site. I used to reference it a lot when I made my transition away from jQuery.