Onclick 删除附加的 Div - JQuery

Onclick remove appended Div - JQuery

提问by Hassan Sardar

How to removethe appended row, when click on "X" button of a specific Div.

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

Here is the JsFiddle DEMO:http://jsfiddle.net/7jE9p/4/

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

I am providing CODE here too:

我也在这里提供代码：

HTML:

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:

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>');

                     });

回答by Anton

Try this, for the dynamically added elements you'll need to use on() and delgate on the closest static element like this :

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

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

DEMO

演示

You could add to the description_text css

您可以添加到 description_text css

margin-bottom:10px;

And ignore adding <br/>to the append

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

DEMO

演示

回答by Moob

As @anton said. Or you can add the remove event to the element itself as per this fiddle(but Anton's solution is better)

正如@anton 所说。或者您可以按照此小提琴将 remove 事件添加到元素本身（但 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);
});

or have the X as the close trigger like this: jsfiddle.net/7jE9p/9

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

    $newEl.on("click", "a", function(){$(this).parent().remove();});

回答by Entity Black

I see nice answers here. Anyway imho the best option is store elements in variables inside function scope. Then you can easy delete every element that was connected with specific cell.

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

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

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

JS:

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