jquery check for checked input

Question

I have few radio inputs with unique id's. Now i have a script that shows some extra content if one of them is checked. It works. But i want to clear that extra content when i check another radio input. This code don't work is i thought. It is not clearing that extra content.

 $(document).ready(function () {
    $("#delivery_option_5_1").change(function () {
        if ($(this).attr("checked")) {
            $(".delivery_options").after("<p id='extracontent'>Hello!</p>");
        }
        else {
            $("#extracontent").remove();
        }
    });
});

Answer 1

I did it like that.

$(document).ready(function () {
    $("#wpunkcie").change(function () {

        if ($(this).prop("checked")) {
            $("#wysylka").after("<p id='info'>Mapa i informacja o wysyłce</p>");
        }
    });
    $("#inne").change(function () {



        if ($(this).prop("checked")) {
            $("#info").remove();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="wysylka"><input type="radio" name="halo" id="wpunkcie"> Odbiór w punkcie pocztowym</input><br>
    <input type="radio" name="halo" id="inne">Inna forma wysyłki</input></form>

Thx for help. :)

Answer 2

Just always delete it before you add a new one. Also use prop instead of attr.

$(document).ready(function () {
    $("#delivery_option_5_1").change(function () {

        $("#extracontent").remove();

        if ($(this).prop("checked")) {
            $(".delivery_options").after("<p id='extracontent'>Hello!</p>");
        }
    });
});