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

Question

I have two buttons add and remove which add and remove divs(which contain other divs) but, if I want to remove a row I can remove only the last row(div), so I thought to add some "remove buttons" at the end of each row(div). The problem is that I did that but I can only remove the first row for only one time and I can't remove the other rows.

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:

Answer 1

Issue is after removing the first row ..there is no row0 class aailable to append the code hence you check here if the div with class .row0 is available or not.

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

        });

        });

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

DEMO

Answer 3

Simply replace your remove script with below script:

<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

You should try this there are basically two approach you can delete a row

First is

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

Second is

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

Do it with classnames, and use ".closest(selector)" to select the closest element (parents) matching the selector to select the "current row".

This will only work on the delete button at each row.

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

I would recommend changing the class-names to something js specific.