After clicking on the input radio li should hide?

Question

JavaScript

Hello everyone, I'm doing a to-do task, there is a task list with an input radio, after clicking it should be deleted, that is, the abyss of the list (the task itself is successfully deleted), I can't execute the jquery part.

Example:
I delete some task, the div hides the block, and when I delete it again, alas, the deletion does not happen ???

<li class="list-group-item task" id="<?= $res['id'] ?>">
    <input type="radio" name="radioTask" class="radioTask" value="<?= $res['id'] ?>">
    <label>
        <span class="list-task"><?= $res['task'] ?></span>
    </label>
</li>

// это часть отправляет value значение в PHP
  $(".radioTask").click(function () {
        var val = $(".radioTask:checked").val();
        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: {val: val},
        });

// а вот это часть скрывает div#task блок
        $("#task").css({
            display: "none",
            visibility: "hidden"
        });
    });

Answer 1

As I was told

$(".radioTask").click(function () {
        var val = $(".radioTask:checked").val();
        $.ajax({
            type: "GET",
            url: "",
            data: {val: val},
        });
        $('.task').click(function(){
            $(this).remove();
        });
    });

Answer 2

Visibility: "hidden" hides your div