Question: I am adding letters and words to an empty text area using the following code:

HTML:

```
<textarea id="Content"></textarea>

<button class="AddTo" value="a">a</button>

```

jQuery:

```
$('.AddTo').on('click', function() {
  $('#Content').append($(this).val());
});

```

How can I delete the last value added to the text area such as "a" or "apple" without clearing everything? Basically I want a delete button to remove the last character.

Answer: 
You should keep an array of the values added to the textarea in javascript. If you want to revert back 1 word (or more) you would simple pop off the values from the array then populate the textarea from the shortened array.

Example:

```
var values = [];

$(function(){

    $('.AddTo').on('click', function() {
        values.push($(this).val());
      $('#Content').val( values.join(" ") );
    });

    $('.Backspace').on('click', function(){
        values.pop();
        $('#Content').val( values.join(" ") );
    });

});

```

**[JSFiddle DEMO](http://jsfiddle.net/jrulle/stLzjmsa/)**

*Demo with freeform text field: [jsfiddle](http://jsfiddle.net/jrulle/stLzjmsa/4/)*
Well you could add your values like this:

```js
$('.AddTo').on('click', function() {
  $('#Content').append('<p> Some value </p>');
});

$('.Remove').on('click', function(){
  $('#Content p:last').remove();
  });
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="AddTo" value="Test">Add</button>
<button class="Remove">Remove</button>

<p id="Content"></p>
```

**Explanation:**

`#` referees for the id selector.

`$('#Contents p)` finds the p tag in the element with id Contents.

`$('#Contents p:last')` selects last p tag in the element with id Contents.

`.remove()` function removes it from the page.