jQuery的添加/删除文本框

脚本：jQuery的添加/删除文本框

$(document).ready(function() { 

    var counter = 2; 

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

     if (counter < 2) { 
     alert("Add more textbox"); 
     return false; 
     } 

     var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

     newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' + 
     '<input type="text" name="textbox' + counter + 
     '" id="textbox' + counter + '" value="" >' + 
     '<input type="button" name="button' + counter + 
     '" id="removeButton' + counter + '" value="Remove Button">'); 
     newTextBoxDiv.appendTo("#TextBoxesGroup"); 


     counter++; 
    }); 

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

     $("#TextBoxDiv" + counter).remove(); 

     if (counter == 2) { 
     alert("No more textbox to remove"); 
     return false; 
     } 


    }); 


    }); 

</script>

HTML：

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
    <label>Textbox #1 : </label> 
    <input type='textbox' id='textbox1'> 
    <input type='button' value='Remove Button' id='removeButton'> 
    </div> 
</div> 
<input type='button' value='Add Button' id='addButton'>

我需要删除按钮是功能性。当我按下侧面的相应按钮时，只有它旁边的文本框才会删除。

来源

2017-02-12 John Kun

如果您需要帮助，请至少尝试形成一个可行的问题。不要只是一遍又一遍地复制和粘贴相同的两个句子。 –

ID必须是唯一的，您不能为每个按钮重复'id =“removebutton”''。改为使用班级。而且，由于您要动态添加元素，请参阅http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements以了解如何添加事件侦听器。 – Barmar

你错过了一些基本的东西。这里是一个可能的解决方案：

$(document).ready(function() { 
 
    var counter = 2; 
 
    $("#addButton").click(function() { 
 
    if (counter < 2) { 
 
     alert("Add more textbox"); 
 
     return false; 
 
    } 
 

 
    var newTextBoxDiv = $(document.createElement('div')) 
 
     .attr("id", 'TextBoxDiv' + counter).attr("class", 'TextBoxDiv'); 
 

 
    newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' + 
 
     '<input type="text" name="textbox' + counter + 
 
     '" id="textbox' + counter + '" value="" >' + 
 
     '<input type="button" name="button' + counter + 
 
     '" class="removeButton" value="Remove Button">'); 
 
    newTextBoxDiv.appendTo("#TextBoxesGroup"); 
 

 
    counter++; 
 
    }); 
 

 
    $("body").on("click", ".removeButton", function() { 
 
    if (counter <= 2) { 
 
     alert("No more textbox to remove"); 
 
     return false; 
 
    } 
 

 
    $(this).closest('.TextBoxDiv').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id='TextBoxesGroup'> 
 
    <div id="TextBoxDiv1"> 
 
    <label>Textbox #1 : </label> 
 
    <input type='textbox' id='textbox1'> 
 
    <input type='button' value='Remove Button' class='removeButton'> 
 
    </div> 
 
</div> 
 
<input type='button' value='Add Button' id='addButton'>

如你是新这里，请不要忘记接受的答案，如果工程。

来源

2017-02-12 05:45:13 itsazzad

请试试这个代码，我希望这将有助于你

$(document).ready(function() { 

    var counter = 2; 

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

     if (counter < 2) { 
     alert("Add more textbox"); 
     return false; 
     } 

     var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

     newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' + 
     '<input type="text" name="textbox' + counter + 
     '" id="textbox' + counter + '" value="" >' + 
     '<input type="button" class="remove" name="button' + counter + 
     '" id="removeButton' + counter + '" value="Remove Button" onclick="remove(this)">'); 
     newTextBoxDiv.appendTo("#TextBoxesGroup"); 


     counter++; 
    }); 




    }); 

function remove(obj) 
{ 
var id =$(obj).attr('id'); 
var counter =id.replace(/[^0-9]/g, ''); 

     $("#TextBoxDiv" + counter).remove(); 

     if (counter == 2) { 
     alert("No more textbox to remove"); 
     return false; 
     } 
}

这是HTML代码

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
    <label>Textbox #1 : </label> 
    <input type='textbox' id='textbox1'> 
    <input type='button' class="remove" value='Remove Button' onclick="remove(this)" id='removeButton1'> 
    </div> 
</div> 
<input type='button' value='Add Button' id='addButton'>

来源

2017-02-12 06:03:48 ubm

jQuery的添加/删除文本框

回答

相关问题