Question

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

以下是JsFiddle DEMO： 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（）和delgate，如下所示：

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

DEMO

您可以添加到description_text css

margin-bottom:10px;

并忽略将<br/>添加到追加

DEMO

Answer 2

正如@anton所说。或者您可以按照 this fiddle 将删除事件添加到元素本身（但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();});

Answer 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();
    });
});

Onclick删除附加的Div - JQuery

3 个答案: