Question

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

HTML CODE：

  <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 CODE：

     <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>

Screenshoot：

ScreenShoot

Answer 1

问题是在删除第一行之后..没有row0类可用于附加代码，因此您在此处检查具有类.row0的div是否可用。

var1=1;var2=var1+1;

    $("#shto").click(function(){
        if($('.row'+var1).is(":visible"))
           $('.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>");
        else
         $('#forma').append("<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);
    });

// 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();

    });

    });

DEMO FIDDLE

Answer 2

<强> JS

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

        });

        });

点击事件未被放置按钮使其工作只需使用上面的代码

DEMO

Answer 3

只需使用以下脚本替换您的删除脚本：

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

    });

    });

</script>

Answer 4

你应该试试这个基本上有两种方法你可以删除一行

首先是

    $(".button-remove").click(function(){
          $(this).parent().parent().remove();
     });

第二是

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

You can see the First demo

Second Demo

Answer 5

使用类名做，并使用＆＃34; .closest（selector）＆＃34;选择与选择器匹配的最近元素（父母）以选择＆＃34;当前行＆＃34;。

这只适用于每一行的删除按钮。

$(".button-remove").on("click", function(e) {
    e.preventDefault();
    $(this).closest(".row").remove();
});

我建议将类名改为特定的js。

jQuery使用嵌套div添加和删除HTML元素

5 个答案: