javascript to fire event of dynamically generated button to remove textbox and radio button

Question

<script type="text/javascript">
var sum = 1;
var flag = 0;
function add(str) {
    var input = document.createElement('input');
    var inputtxt = document.createElement('input');
    var inputfile = document.createElement('input');
    var inputbutton = document.createElement('input');
    var br = document.createElement("br");
    $("#fooBar").show();
    if (str == 0) {
        alert("Please select option");
    }
    if (str == 1) {
        document.getElementById("ddlQuestion_Type").disabled = true;
        br.id = 'br' + sum;

        input.type = 'radio';
        input.value = '';
        input.name = 'a';
        input.className = 'Jradio';
        input.id = 'rdoption' + sum;

        inputtxt.type = 'text';
        inputtxt.value = '';
        inputtxt.name = 'txt' + sum;
        inputtxt.id = 'Txtoption' + sum;
        inputtxt.className="Jtxtbox"

        inputbutton.type = 'button';
        inputbutton.value = '';
        inputbutton.name = 'BtnDelete' + sum;
        inputbutton.id = 'BtnDelet' + sum;

        inputbutton.onclick = function () {
            alert(document.getElementById('rdoption' + sum).value);
            alert(document.getElementById('Txtoption' + sum));
        }

        flag = 1;

        var foo = document.getElementById("fooBar");

        //Append the element in page (in span).
        foo.appendChild(input);
        foo.appendChild(inputtxt);
        foo.appendChild(inputbutton);
        //foo.appendChild(inputfile);

        foo.appendChild(br);
        sum = sum + 1;
    }

}

i am working on online examination module in which i am adding question and generating option and this option are dynamic. In option structure is like

A) radiobutton textbox Deletebutton(delete option)

B) radiobutton textbox Deletebutton(delete option)

C) radiobutton textbox Deletebutton(delete option)

    .

    .

    .

Now what i want to do is when user click on any delete button then i want to remove

radio button and textbox along with that delete button.

but problem is how do i fire specific delete button event and remove specific textbox and radiobutton along with delete button.

can any one please help me with t**his javascript??**

please provide me help with javascript only if possible

Answer 1

You can create a wrapper for each row, then, you catch the click event of the delete button and pass it to a function that delete this parent row. Supouse that you have this in a list "ul":

ul

li A) radiobutton textbox [button class="delete" delete]

li B) radiobutton textbox [button class="delete" delete]

li C) radiobutton textbox [button class="delete" delete]

JS (i write jquery for this example, if you want, you can translate to JS native):

$(".delete").click(function(el){
var $el = $(el);
// any code....
$el.closest( "li" ).remove();
});

when you put other li in the DOM, you most bind the click event for each new element.