javascript来触发动态生成按钮的事件来删除文本框和单选按钮

时间:2014-07-12 04:35:09

标签: javascript asp.net-mvc-4

<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;
    }

}

我正在研究在线考试模块,其中我正在添加问题和生成选项,此选项是动态的。 选项结构就像

A)radiobutton文本框Deletebutton(删除选项)

B)radiobutton文本框Deletebutton(删除选项)

C)radiobutton文本框Deletebutton(删除选项)

    .

    .

    .

现在我要做的是当用户点击任何删除按钮然后我要删除

单选按钮和文本框以及该删除按钮。

但问题是如何触发特定的删除按钮事件删除特定的文本框 和radiobutton以及删除按钮。

任何人都可以用他的javascript帮助我吗?? **

请尽可能 javascript向我提供帮助

1 个答案:

答案 0 :(得分:0)

您可以为每一行创建一个包装器,然后捕获删除按钮的click事件并将其传递给删除此父行的函数。 在列表“ul”中有这个的Supouse:

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(我为这个例子写了jquery,如果你愿意的话,你可以翻译成JS原生的):

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

当你在DOM中放入其他li时,你最多为每个新元素绑定click事件。