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

我有兩個按鈕添加和刪除哪些添加和刪除div（其中包含其他div），但是，如果我想刪除一行我只能刪除最後一行（div），所以我想在每行（div）的末尾添加一些「刪除按鈕」。問題是，我這樣做，但我只能刪除第一行只有一次，我不能刪除其他行。jQuery添加和刪除嵌套div的HTML元素

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>

Screenshoot：

ScreenShoot

來源

2015-04-20 Alban Kaperi

你能創建一個小提琴？這將很容易檢查，並儘快讓我們回到你:) –

#Vigneswaran Marimuthu http://jsfiddle.net/alban_kaperi/bfcwpcmu/ –

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

     }); 

     });

Click事件未放置該按鈕，使其工作只使用上面的代碼

DEMO

來源

2015-04-20 11:20:21

你會推薦什麼來覆蓋類的div和輸入的名字在被刪除的行下面，例如，如果我刪除了row4，我希望row5和其他在row4下面的其他人減少-1。 –

與類名做吧，而且用「.closest（選擇）」，以選擇與選擇器匹配的最近的元素（父母）以選擇「當前行」。

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

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

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

來源

2015-04-20 11:10:44

問題是在刪除第一行後，沒有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

來源

2015-04-20 11:17:05

這個想法是，我想要的類按鈕按鈕刪除按鈕刪除他們當前的div，只是爲了更好地使用jsfiddle中的bootstrap css： https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css –

只需使用下面的腳本替換你刪除腳本：

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

來源

2015-04-20 11:25:03 Butterfly

你應該試試這個基本上有兩種方法，您可以刪除行

首先是

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

來源

2015-04-20 11:33:46

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

回答

相關問題