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的添加/刪除文本框

回答

相關問題