افزودن و حذف element ها در js

سلام یه صفحه افزودن آزمون دارم. میخوام با هر بار کلیک یه دکمه 5 تا input text و یه دکمه اضافه بشه این مورد نامحدود باشه
تا اینجاشو انجام دادم
اما میخوام اون دکمه که ساخته میشه با کلیک روی اون input های مربوط بهش هم حذف بشن
کد و عکس رو پیوست کردم.

$(document).ready(function(){    $("#btn_add").click(function(){

        $("#questions").append('<span class="col-md-12">    <div class="form-group col-md-9" style="float: right">

        <label>سوال</label>

        <input type="text" name="question" class="form-control" required=""/>

    </div>

    <br />

    <div class="form-group col-md-3" style="float: left">

        <button id="btn_del" type="button" class="btn btn-danger">حذف</button>

    </div>

</span>

<span class="col-md-12">

    <div class="form-group col-md-3">

        <label>گزینه اول(درست)</label>

        <input type="text" name="answer1" class="form-control" required=""/>

    </div>



    <div class="form-group col-md-3">

        <label>گزینه دوم</label>

        <input type="text" name="answer2" class="form-control" required=""/>

    </div>



    <div class="form-group col-md-3">

        <label>گزینه سوم</label>

        <input type="text" name="answer3" class="form-control"/>

    </div>



    <div class="form-group col-md-3">

        <label>گزینه چهارم</label>

        <input type="text" name="answer4" class="form-control"/>

    </div>

    <br />

</span>');

    });

});

کدت رو درست کن قابل دیدن نیست