Question

$(document).ready(function(){

     var i=0;

     var inputs = new Array();
     var $type,$name, $label;    

     $("#txt").click(function(){
          var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + i);

     newTextBoxDiv.after().html(
          '<input type="text" name="textbox' + i + 
          '" id="textbox' + inputs.length + '" value="" >' + '<input type="button" id="x'+inputs.length+'"value="x">');

     newTextBoxDiv.appendTo("#holder");

     inputs.push(['text','textbox'+i,'textboxtx'+i]);

     i++;


});

$("#chk").click(function(){

     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + inputs.length);

     newTextBoxDiv.after().html(
          '<input type="checkbox" name="checkbox' + i + 
          '" id="checkbox' + inputs.length + '" value="" >' + '<input type="button" id="x'+inputs.length +'"value="x">');

     newTextBoxDiv.appendTo("#holder");

     inputs.push(['checkbox','checkbox'+i,'checkbotx'+i]);

     i++;


});

$("#rad").click(function(){
     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + inputs.length);

     newTextBoxDiv.after().html(
          '<input type="radio" name="radio' + i + 
          '" id="radio' + inputs.length + '" value="" >' + '<input type="button" id="x'+inputs.length +'"value="x">');

     newTextBoxDiv.appendTo("#holder");

     inputs.push(['radio','radio'+i,'radiot'+i]);

    i++;


});

$("#btn").click(function(){
     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + inputs.length);

     newTextBoxDiv.after().html(
          '<input type="button" name="button' + i + 
          '" id="button' + inputs.length + '" value="button'+i+'" >' + '<input type="button" id="x'+inputs.length +'"value="x">');

     newTextBoxDiv.appendTo("#holder");

     inputs.push(['button','button'+i,'buttont'+i]);

     i++;

     $("#holder").append(inputs);


});

在下面的代码中我通过按下一个按钮（创建计算输入的div）动态文本字段按钮radion ..etc

 for(a=0 ;a<inputs.length ;a++){

     $("#x"+a).click(function(){
          $("#Div"+a).remove();    
     });
   };
})

在这部分我试图删除某些div，但它不起作用！ Javascript / jQuery不是我经常使用的语言。所有帮助表示赞赏。谢谢！

<div>
 <div style="display:inline">

<input type="button" id="txt" value="Add TextBox" style="" /><br>
<input type="button" id="chk" value="Add CheckBox" style="" /><br>
<input type="button" id="rad" value="Add Radio" style="" /><br>
<input type="button" id="btn" value="Add Button" style="" /><br>

</div>
<div id="holder">
</div>




</div>  
</body>
</html>

Answer 1

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div> 
        <div style="display:inline"> 
            <input type="button" id="txt" value="Add TextBox" style="" >
            <br> 
            <input type="button" id="chk" value="Add CheckBox" style="">
            <br> 
            <input type="button" id="rad" value="Add Radio" style="" >
            <br> 
            <input type="button" id="btn" value="Add Button" style="" >
            <br> 
        </div> 
        <div id="holder"> 
        </div> 
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            var i=0;
            var inputs = new Array();
            var $type,$name, $label;    
            $("#txt").click(function(){
                var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + i);
                newTextBoxDiv.after().html(
                    '<input type="text" name="textbox'+i+'" id="textbox'+inputs.length+'" value="" ><input type="button" onclick="xtext(\''+i+'\')" id="xtext'+inputs.length+'" value="x">');
                newTextBoxDiv.appendTo("#holder");
                inputs.push(['text','textbox'+i,'textboxtx'+i]);
                i++;
            });

            $("#chk").click(function(){

                var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + inputs.length);
                newTextBoxDiv.after().html('<input type="checkbox" name="checkbox'+i+'" id="checkbox'+inputs.length+'" value="" ><input type="button" onclick="xcheck(\''+i+'\')"  id="xcheck'+inputs.length +'"value="x">');
                newTextBoxDiv.appendTo("#holder");
                inputs.push(['checkbox','checkbox'+i,'checkbotx'+i]);
                i++;
            });

            $("#rad").click(function(){
                var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + inputs.length);
                newTextBoxDiv.after().html('<input type="radio" name="radio'+i+'" id="radio'+inputs.length+'" value="" ><input type="button" onclick="xradio(\''+i+'\')"  id="xradio'+inputs.length +'" value="x">');
                newTextBoxDiv.appendTo("#holder");
                inputs.push(['radio','radio'+i,'radiot'+i]);
                i++;
            });

            $("#btn").click(function(){
                var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + inputs.length);

                newTextBoxDiv.after().html('<input type="button" name="button'+i+'" id="button'+inputs.length+'" value="button'+i+'" ><input type="button" onclick="xbtn(\''+i+'\')"  id="xbtn'+inputs.length +'" value="x">');

                newTextBoxDiv.appendTo("#holder");
                inputs.push(['button','button'+i,'buttont'+i]);
                i++;
                $("#holder").append(inputs);


            });



        });
function xtext(id)
{
    $("#xtext"+id).remove();
    $("#textbox"+id).remove();

}
function xcheck(id)
{
    $("#xcheck"+id).remove();
    $("#checkbox"+id).remove();

}
function xbtn(id)
{
    $("#xbtn"+id).remove();
    $("#button"+id).remove();

}
function xradio(id)
{
    $("#xradio"+id).remove();
    $("#radio"+id).remove();

}
</script>   
</body> 
</html>

如何通过按下按钮删除div？

1 个答案: