2

单击特定 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 */
}

查询：

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

                     });
4

3 回答 3

9

试试这个，对于动态添加的元素，您需要使用 on() 和 delgate 在最近的静态元素上，如下所示：

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

演示

您可以添加到 description_text css 

margin-bottom:10px;

并忽略添加<br/>到附加

演示

于 2013-09-17T13:36:25.980 回答
4

正如@anton 所说。或者您可以按照这个小提琴将删除事件添加到元素本身（但安东的解决方案更好）

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

或将 X 作为关闭触发器，如下所示：jsfiddle.net/7jE9p/9

    $newEl.on("click", "a", function(){$(this).parent().remove();});
于 2013-09-17T13:44:58.720 回答
3

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

http://jsfiddle.net/7jE9p/8/

JS：

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

    cell.append(deleteButton);

    $(".append_data").append(cell);
    spaces.insertAfter(cell);

    deleteButton.click(function () {
        cell.remove();
        spaces.remove();
    });
});
于 2013-09-17T13:51:43.503 回答