javascript - Onclick 删除附加的 Div - JQuery

Question

如何在单击特定 Div 的“X”按钮时删除附加行。

这是 JsFiddle 演示: http://jsfiddle.net/7jE9p/4/

我也在这里提供代码:

HTML:

      <p>
          <a href="javascript:void(0);" class="add_more">Add More</a>
      </p>

<table border="0" width="500" cellspacing="0">
   <tbody class="append_data"></tbody>

<tr>
  <td> 
      <textarea name="description" id="description"></textarea>
  </td> 
</tr> 

</table>    

CSS:

#description{
    width:400px;    
}

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
}

.append_data{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

JQuery:

$('.add_more').click(function()
                     {
                        var description = $('#description').val();
                         $(".append_data").append('<div class="description_text">'+description+' <a href="javascript:void(0);">X</a></div><br><br>');

                     });

Answer 1

试试这个，对于动态添加的元素，您需要使用 on() 并在最近的静态元素上进行委托(delegate)，如下所示:

$('.append_data').on('click','.description_text a',function(){
     $(this).closest('.description_text').remove();
});

DEMO

您可以添加到 description_text CSS

margin-bottom:10px;

并忽略添加 <br/>追加

DEMO