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

Question

我有兩個按鈕添加和刪除添加和刪除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 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

問題是在刪除第一行之后..沒有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();
    });
 });

你可以看到第一個演示

第二次演示

Answer 5

使用類名進行操作，並使用“.closest（selector）”選擇與選擇器匹配的最近元素（父級）以選擇“當前行”。

這僅適用於每行的刪除按鈕。

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

我建議將類名改為特定的js。