Javascript Onclick删除附加的Div-JQuery

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

这里是JsFiddle演示：

我也在这里提供代码：

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>    

#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 */
}

$('.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>');

                     });

CSS:

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

#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 */
}

$('.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>');

                     });

#说明{
宽度：400px；
}
.description_text{
边框：#333333实心1px；
宽度：400px！重要；
}
.append\u数据{
空白：预换行；/*CSS3*/
空白：-moz预包装；/*Firefox*/
空白：-pre wrap；/*Opera试试这个，对于动态添加的元素，您需要在（）上使用，在最近的静态元素上使用delgate，如下所示：

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


您可以在描述中添加文字css

margin-bottom:10px;

并忽略将

添加到追加中

正如@anton所说。或者您可以根据将移除事件添加到元素本身（但anton的解决方案更好）

我在这里看到了很好的答案。无论如何，最好的选择是将元素存储在函数范围内的变量中。然后你可以轻松地删除与特定单元格连接的每个元素


JS:

$（'.add_more'）。单击（函数（）{
var description=$（'#description'）.val（）；
var deleteButton=$（''）；
变量单元格=$（''+说明+''）；
变量空间=$（'

'）；
单元格追加（删除按钮）；
$（“.append_data”）.append（单元格）；
空格。插入后面（单元格）；
删除按钮。单击（函数（）{
单元格。删除（）；
空格。删除（）；
});
});
您的html无效，div作为tbody的子项？这个答案很完美，但它并没有删除div覆盖的空格。它删除了div，但不是div的空格非常整洁。+1。在您的代码中，末尾有额外的空格。因此我也添加了它们；）