如何使用JavaScript動態刪除多個輸入字段

Question

我是JavaScript的初學者。我使用bootstrap做了3個輸入字段。我想動態地啟用添加/刪除這些字段。我做了JavaScript以添加更多選項（下面給出的照片）。

但是我也想要一個remove選項。我看了很多JavaScript / jquery教程和許多示例代碼片段，以了解add / remove選項，但是我對此很執迷。我想像這樣做3個輸入字段（下面的照片）

現在這里是代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">  
  <form class="form-inline" role="form">
     <div class="form-group" id="parent_div">       
        <div class="row form-group" id="child_div">   
            <label for="day" class="col-xs-2 control-label"></label>
            <div class="col-xs-12 col-lg-3">
               <label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
               <div class="input-group" style="">
                    <select class="form-control " id="employeetype" onchange="updateText('')">
                            <option value="" disabled="" selected=""  >Select Job Type</option> 
                            <option value="10">1</option>
                            <option value="10">2</option>
                            <option value="10">3</option>                           
                    </select> 
                </div>  
            </div>
            <div class="col-xs-12 col-lg-3" >
               <label for="form-input-col-xs-3" class="wb-inv">Date:</label>
               <div class="input-group" >
               <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
               <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
               </div>
            </div>
           <div class="col-xs-12 col-lg-3">
              <label for="form-input-col-xs-4" class="wb-inv">Amount:</label>
              <div class="input-group" >
              <input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" />
              <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>              
              </div>              
           </div> 
        </div>  
    </div>
    <label for="day" class="col-xs-2 control-label"></label>
    <input class="btn btn-success " type="button" id="create_button" value="+" />
  </form>  
</div>

<script>

document.getElementById("create_button").onclick = function (){
var temp = document.getElementById("child_div").outerHTML;
document.getElementById("parent_div").innerHTML = document.getElementById("parent_div").innerHTML + temp;
}

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

請給我一些關於同時執行添加/刪除選項的想法。請讓我知道更多信息。謝謝

Answer 1

免責聲明 ：以下代碼段可以完善，但這只是為了告訴您總體思路。

http://jsfiddle.net/Lox5w8ge/1/

首先，ID應該是唯一的，因此切勿重復！ 我刪除了child_div id並將其child_div一個類。 由於您確實包含jQuery，因此我決定使用它並利用它提供的功能向按鈕添加一些事件並選擇正確的元素。

$('#create_button').click(function() {
    var html = $('.child_div:first').parent().html();
    $(html).insertBefore(this);
});

$(document).on("click", ".deleteButton", function() {
    $(this).closest('.child_div').remove();
});

我首先從找到的第一個child_div獲取html，並將其插入到用於添加div的按鈕之前。

為了再次刪除child_div ，我首先使用jquery的特定類deleteButton向其中添加了一個按鈕，並添加了一個click事件，當單擊這種類型的按鈕時，該事件將找到包含該按鈕的child_div ，然后將其刪除。

Answer 2

通過JQuery

var x = 1;
var field ='<div><input type="text" name="field_name[]" value="" /><a href="javascript:void(0);" class="remove_button" title="Add field"><button class=" btn btn-danger" style=" margin:5px;">Remove This</button></a></div>'
$(".add_button").click(function(){
    if(x < 10){
        $(".input_field_wrapper").append(field);
        x++;
    }else{
        alert("max ten field allowed");
    }
});
$(".input_field_wrapper").on("click" ,".remove_button" , function(){
    $(this).parent("div").remove();
        x--;
});

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form class="form-inline" role="form">
            <div class="form-group" id="parent_div">
              <div id="parent_div1"></div>
                <div class="row form-group" id="child_div">
                  <div>
                    <hr>
                    <div class="col-xs-12 col-lg-3">
                        <div class="input-group" style="">
                            <select class="form-control " id="employeetype" onchange="updateText('')">
                                <option value="" disabled="" selected="">Select Job Type</option>
                                <option value="10">1</option>
                                <option value="10">2</option>
                                <option value="10">3</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-12 col-lg-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
                            <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-lg-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" />
                            <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-lg-1">
                        <input class="btn btn-success " type="button" id="create_button" value="+" />
                    </div>
                </div>
                </div>

            </div>
        </form>
    </div>
    <!-- var -->
    <script>
    var temp = '<div class="row form-group" id="child_div_append"><hr><div class="col-xs-12 col-lg-3"><div class="input-group" style=""><select class="form-control " id="employeetype"><option value="" disabled="" selected=""  >Select Job Type</option><option value="10">1</option><option value="10">2</option><option value="10">3</option> </select></div></div><div class="col-xs-12 col-lg-3" ><div class="input-group" ><input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" /><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div><div class="col-xs-12 col-lg-3"><div class="input-group" ><input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" /><span class="input-group-addon"><i class="glyphicon glyphicon-usd">2</i></span></div></div><button  onclick="remove(this)" type="button">Remove</button></div>';
    document.getElementById("create_button").onclick = function() {
         document.getElementById("parent_div1").innerHTML = document.getElementById("parent_div1").innerHTML + temp;
    }
    function remove(e) {
        e.parentNode.remove();
    }
    </script>
</body>

</html>

如何使用JavaScript動態刪除多個輸入字段

問題描述

3 個解決方案

解決方案1
1 2015-12-08 13:15:38

解決方案2
0 2019-06-28 09:33:31

解決方案3
0 2019-06-28 09:55:00

如何使用JavaScript動態刪除多個輸入字段

問題描述

3 個解決方案

解決方案1 1 2015-12-08 13:15:38

解決方案2 0 2019-06-28 09:33:31

解決方案3 0 2019-06-28 09:55:00

解決方案1
1 2015-12-08 13:15:38

解決方案2
0 2019-06-28 09:33:31

解決方案3
0 2019-06-28 09:55:00