通过按钮删除动态添加的li [英] Remove dynamically added li via button

问题描述

我创建了< ul> ，它通过一个带有删除按钮的按钮动态添加< li>按钮。

最初，默认的li不能包含一个删除，所以我将它添加到脚本中

SCRIPT $ b

  $（document）.ready（function（）{
 $（＃add ）.click（function（）
 {
 $（'。main'）。append（'< br>'）; 
 $（'。main'）。append（$ '.append_list'）。html（））; 
 
 $（'。main'）。append（< button class ='rmv_btn'style ='clear：both'> Remove< / button>）; 
 
}）; 
 $（。rmv_btn）。click（function（）
 {
 $（this）.remove append_list）; 
 //也试过这个$（this）.closest（'li'）。remove（）; 
}）; 
}）; 
  

当我点击删除按钮时，特定部分只能删除.....

HTML

 < ul class =main风格=列表样式类型：无;> 
< li class =append_list> 
< label>产品1< / label> < input type =text> 
< br> 
< label>产品2< / label> < input type =text> 
< br> 
< label>产品3< / label> < input type =text> 
< br> 
< label>产品4< / label> < input type =text> 
< br> 
 
< / li> 
< / ul> 
< button id =addstyle =clear：both>添加新产品< / button>  -  
  

我在这里制作了垃圾箱。

我怎样才能做到这一点??

注意

我已经做了这个过程，但直到它的complecated，我想把删除按钮旁边的第一个文本框创建在这里...

解决方案
$ b

  $（document）.ready（function（）{
 $ （#add）。click（function（）
 {
 $（'。main'）。append（$（'。main>：first-child'）。clone（））; 
 $（'。main'）。append（< button class ='rmv_btn'style ='clear：both'> Remove< / button>）; 
 
} ）; 
 $（'。main'）。on（click，。rmv_btn，function（）
 {$（this）.prev（'li'）。remove（）; 
 $（this）.remove（）; 
}）; 
}）; 
  

工作演示

更新了演示版

I have created a <ul> which add <li> dynamically by a button with a remove button.

Initially the default li must not contain a remove so i added it in script

SCRIPT

$(document).ready(function(){
$("#add").click(function () 
{       
  $('.main').append('<br>');    
  $('.main').append($('.append_list').html());

  $('.main').append("<button class='rmv_btn' style='clear:both'> Remove </button>");

});                 
$(".rmv_btn").click(function () 
{
   $(this).remove("append_list");
  //Also tried this      $(this).closest('li').remove();
});
});

When i click the remove button that particular section only removed.....

HTML

     <ul class="main" style="list-style-type:none;">
<li class="append_list">
  <label>Product 1</label> <input type="text">
  <br>
   <label>Product 2</label> <input type="text">
  <br>
   <label>Product 3</label> <input type="text">
  <br>
   <label>Product 4</label> <input type="text">
  <br>

</li>
</ul>
<button id="add" style="clear:both">ADD NEW PRODUCTS</button>-

Here I made a bin in this.

How can i make this??

NOTE

I have made this process but till its complecated for i want to place the remove button next to the first textbox created here...

解决方案

Try this way,

$(document).ready(function(){
$("#add").click(function () 
{       
    $('.main').append($('.main > :first-child').clone());
    $('.main').append("<button class='rmv_btn' style='clear:both'> Remove </button>");

});                 
$('.main').on("click",".rmv_btn",function () 
{   $(this).prev('li').remove();
     $(this).remove();
});
});​

Working demo

Updated Demo

这篇关于通过按钮删除动态添加的li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！