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

Here is the JsFiddle DEMO: /

I am providing CODE here too:

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

                     });

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

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

I am providing CODE here too:

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

                     });

• javascript
• jquery
• html
• css

• 2 your html is invalid, div as child of tbody? – Arun P Johny Commented Sep 17, 2013 at 13:36

3 Answers 3

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

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

DEMO

You could add to the description_text css

margin-bottom:10px;

And ignore adding <br/> to the append

DEMO

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

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

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

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/

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