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

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.

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

HTML CODE:

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

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>

Screenshoot:

Screenshoot:

5 个解决方案

#1

JS

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

演示

#2

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.

问题是在删除第一行之后。没有row0类aailable来附加代码，因此您可以在这里检查具有.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

演示小提琴

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

#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

第二个演示

#5

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

使用类名完成，并使用“. nearest (selector)”来选择与selector匹配的最近元素(parents)，以选择“current row”。

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

这只对每一行的delete按钮起作用。

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

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

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