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

[Roy Harper]

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>
    <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>
</tr>

$("#mark-as-important").click(function () {
    var span = $(
      "<span class='float-right important'><i class='fa fa-certificate'></i></span>"
    );
    $(".mail:checked")
      .closest("tr")
      .find(".mail-contact")
      .find("a")
      .each(function () {
        if ($(this).find(".important").length) {
          $(this).children(".important").remove();
        } else {
          $(this).append(span);
        }
      });
  });

 

[Elindo]

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.

JavaScript DOM Nodes

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

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​