我有两个按钮添加和删除添加和删除 div(其中包含其他 div)但是，如果我想删除一行我只能删除最后一行(div)，所以我想添加一些“删除按钮"在每行 (div) 的末尾。 问题是我这样做了，但我只能删除第一行一次，而不能删除其他行。

HTML 代码:

  <form action='' method='post'>

    <div class='row'>
        <div class='col-md-2 col-sm-2 col-lg-2'> <h4>Manufacturing_part_no</h4></div>
        <div class='col-md-1 col-sm-1 col-lg-1'> <h4>Type</h4></div>
        <div class='col-md-2 col-sm-2 col-lg-2'><h4>Description</h4> </div>
        <div class='col-md-1 col-sm-1 col-lg-1'> <h4>Value</h4></div>
        <div class='col-md-1 col-sm-1 col-lg-1'> <h4>Voltage</h4></div>
        <div class='col-md-1 col-sm-1 col-lg-1'> <h4>Power</h4></div>
        <div class='col-md-1 col-sm-1 col-lg-1'> <h4>Percent.%</h4></div>
        <div class='col-md-1 col-sm-1 col-lg-1'><h4>Quantity</h4> </div>        
        <div class='col-md-1 col-sm-1 col-lg-1'> <h4>Rack_no</h4></div> 
        <div class='col-md-1 col-sm-1 col-lg-1'> <h4>Proj. Name</h4></div>     
    </div>

      <div id='forma' >      
          <div class='row row1'>            
            <div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='manufacturing_part_no1'></div>
            <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='type1'></div>
            <div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='description1'></div>
            <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='value1'></div>
            <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='voltage1'></div>
            <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='power1'></div>
            <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='percentage1'></div>
            <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='quantity1'></div>            
            <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='rack_no1'></div>
            <div class='col-md-1 col-sm-1 col-lg-1'> <button type='button' class='btn btn-danger btn-block button-remove' name='btn1' value='1'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></div>
            <br>
          </div>
     </div>

      <div id='shto_heq' class=''>
      <hr>
        <div class="row">
                 <div class="col-md-3 col-sm-3 col-lg-3">
                 <button id='shto' class='btn btn-primary btn-block' type='button'>Add Row <span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button>
                 </div>
                 <div class="col-md-3 col-sm-3 col-lg-3">  
                 <button id='heq' class='btn btn-danger btn-block' type='button'>Remove Row <span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button>
                 </div>
                 <div class="col-md-3 col-sm-3 col-lg-3"> 
                 <input type="text" id="numberofrows" name="maxrows" class="form-control" value="1" style="display:none;">
                 </div>
                 <div class="col-md-3 col-sm-3 col-lg-3"> 
                    <div id="numrirrjeshtave"></div>
                 </div>
       </div> 
      </div>



      <div id='butoni_submit' class=''>
      <hr>
        <button id='butoni' class='btn btn-success btn-block btn-lg' name='submit' type='submit'>Submit The Data <span class='glyphicon glyphicon-ok' aria-hidden='true'></button>
      </div>

    </form>

JQUERY 代码:

     <script>
     //this is where I add and remove rows, but only from the end.
     var1=1;var2=var1+1;

    $("#shto").click(function(){
        $('.row'+var1).after("<div class='row row"+var2+" hapesirandermjetrow'><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='manufacturing_part_no"+var2+"'></div> <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='type"+var2+"'></div><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='description"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='value"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='voltage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='power"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='percentage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='quantity"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='rack_no"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <button type='button' class='btn btn-danger btn-block button-remove' name='btn"+var2+"' value='"+var2+"'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></div><br></div>");
        var2=var2+1;var1=var1=var1+1;
        $('#numrirrjeshtave').html("<button id='numrirrjeshtave' class='btn btn-default btn-block' type='button'>Number of Rows is: "+var1+"</button>");
        $('#numberofrows').val(var1);
    });
    $("#heq").click(function(){
        $('.row'+var1).remove();
        var2=var2-1;var1=var1=var1-1;
        $('#numrirrjeshtave').html("<button id='numrirrjeshtave' class='btn btn-default btn-block' type='button'>Number of Rows is: "+var1+"</button>");
        $('#numberofrows').val(var1);
    });




    </script>


<script>
// This is where i want to remove a specific row.
    $(document).ready(function(){
    var3=$(".button-remove").click().val();
    $(".button-remove").click(function(){
      $(this).closest('.row').remove();

    });

    });

</script>

截图:

最佳答案

JS

 $(document).ready(function(){
        var3=$(".button-remove").click().val();
        $(document).on("click",".button-remove",function(){
          $(this).closest('.row').remove();

        });

        });

Click event wasn't placed for The button to make it work just use the above code

DEMO

关于javascript - jQuery 添加和删除带有嵌套 div 的 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29746118/