CODEWITHSUNDEEP
jquery
nodeffect
nodeffect

Reputation: 1840

Remove class/CSS icon when click using jquery

Below is my code. I would like to remove the class "fa-circle" whenever I click on the link. The "fa-circle" is an CSS icon. How can I achieve that using jquery? Thanks 

<tr id="message1">
            <td class="padding-none">
                <a href="#" class="list-group-item" style="display:block;word-wrap:break-word; cursor:pointer;" onclick="getmail(<?= $row_msg['mailbox_id'] ?>);">
                    <span class="label label-inverse pull-right"><?= date('d M' ,strtotime($row_msg['sent_on'])) ?></span>
                    <h4><?= $subject ?> <i class="fa fa-circle text-primary"></i></h4>
                    <p class='text-regular margin-none' style="height:40px; overflow:hidden;"><?= $row_msg['email_body']; ?></p>
                </a>
            </td>
        </tr>
    <tr id="message2">
        <td class="padding-none">
            <a href="#" class="list-group-item" style="display:block;word-wrap:break-word; cursor:pointer;" onclick="getmail(<?= $row_msg['mailbox_id'] ?>);">
                <span class="label label-inverse pull-right"><?= date('d M' ,strtotime($row_msg['sent_on'])) ?></span>
                <h4><?= $subject ?> <i class="fa fa-circle text-primary"></i></h4>
                <p class='text-regular margin-none' style="height:40px; overflow:hidden;"><?= $row_msg['email_body']; ?></p>
            </a>
        </td>
    </tr>

This is my getmail function

function getmail(mailno){
    $('#mailbox').show(400);
    $.ajax({
        type: "POST",
        url: "../ajax/getmail.php",
        data: "mailno="+mailno,
        dataType: 'json',
        success: callbackGetMail
    });
}

Upvotes: 1

Views: 1112

Answers (1)

Kristoffer J&#228;l&#233;n
Kristoffer J&#228;l&#233;n

Reputation: 4748

Use some selector to select the anchor and then use the .removeClass() method on the child with class fa-circle.

<a href="#" data-mailboxid="<?= $row_msg['mailbox_id'] ?>" class="list-group-item" style="display:block;word-wrap:break-word; cursor:pointer;">

$('a').click(function(event) {
    event.preventDefault();
    getmail($(this).data("mailboxid"));
    $(this).find('.fa-circle').removeClass('fa-circle');
});

Upvotes: 1

Related Questions