event.currentTarget toggle class of chield element not working-CodePudding

I am trying to toggle a class of chield element of the element.currentTarget and its not working. I don't know what to do.

HTML:

<div  data-btntype="comment">
    <div >
        <img src="/icons/chat-bubble.png"> 
    </div>
      UserPosts[i].retweetedpost.numComments %> 
 </div>

JS:

event.currentTarget.children(".post-footer-icons-circle").removeClass("redl");

I don't mind if I use this class or not, I just want to select the first and unique child and toggle the class.

All code:

$(".post-footer-icons-container-el").on("click",function(event){
    event.preventDefault();
    const postid = event.currentTarget.parentElement.getAttribute("data-postId");
    const typebtn = event.currentTarget.getAttribute("data-btntype");
    
    if(typebtn==="like"){
        //no funciona async await en jquery .on
        axios.post("http://127.0.0.1:3000/useractions/likepostmanage",{
                "likedpost":postid
            }).then(function(response){
                //the parent event handler will not be triggered
                
        });

        event.currentTarget.children(".post-footer-icons-circle").toggleClass("redl"):
    }
    if(typebtn==="rt"){
        //no funciona async await en jquery .on
        axios.post("http://127.0.0.1:3000/useractions/retweetpostmanage",{
                "retweetedpost":postid
            }).then(function(response){
                //the parent event handler will not be triggered
                
        });
        $(event.currentTarget).find(":selected").toggleClass("redl");
    }
    
    event.stopPropagation(); 
});

Anything is working for me for work with childs.

Also above code gives me an error:

Uncaught TypeError: event.currentTarget.children is not a function

CodePudding user response：

Use jQuery object $(this) and call the first .children() using eq to toggle your class.

Example:

$(".post-footer-icons-container-el").on("click", function(event) {
  $(this).children(".post-footer-icons-circle:eq(0)").toggleClass("redl");
});

.redl {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  data-btntype="comment">
  <div >
    <img  src="/icons/chat-bubble.png">
  </div>
  count
</div>