By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Add/remove element on button click, based on checked checkboxes

I am creating messaging process but I encounter problem with marking messages as important/unimportant.


What I am trying to achieve is, if I mark those messages as important, I will append that icon to specific element. And if I mark it again as unimportant, the icon will be removed.
However, something weird is happening to adding/removing that icon, which I couldn't figure out how to solve. So, just like the read/unread, I'd like to toggle between important/unimportant.

<tr class="<?php echo $isRead; ?>" data-id="<?php echo $key['mailID']; ?>">
    <td class="check-mail">
    <input type="checkbox" class="i-checks mail" autocomplete="off">
    <td class="mail-contact"><a href="mail_detail.php?id=<?php echo $key['mailID']; ?>"><?php echo ucwords(strtolower($guiClass->e($key['name']))); ?></span></a></td>
    <td class="mail-subject"><a href="mail_detail.php?id=<?php echo $key['mailID']; ?>"><?php echo mb_strimwidth(ucfirst($guiClass->e($key['subject'])), 0, 60, "..."); ?></a></td>
    <td class="text-right mail-date"><?php echo time_passed(date(strtotime($key['created_at']))); ?></td>

$("#mark-as-important").click(function () {
    var span = $(
      "<span class='float-right important'><i class='fa fa-certificate'></i></span>"
      .each(function () {
        if ($(this).find(".important").length) {
        } else {
Very similar question to my question on "how to add and remove fieldsets from a form"... I am also using radio check options, but NOT using PHP.. You posted on a Javascript forum.... not sure if there is a PHP forum (first day in here)

I am only working it on html and javascript.

If it helps you.. this is a simple script from w3schools on how to create an element.

This other one is a YouTube video on how to hide elements onclick from a checkbox

video title:

Use JavaScript to Hide or Show a Portion of a Form​

Last edited by a moderator:

New Threads

Latest posts

Buy us a coffee!

Top Bottom