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.

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.

• javascript
• jquery
• html

• provide html code too? – Muhammad Usman Commented Sep 21, 2015 at 12:01
• 1 by last word you mean preceeded by space or other character? – guradio Commented Sep 21, 2015 at 12:02
• please clear up some more your question – Daniel Rosano Commented Sep 21, 2015 at 12:03

6 Answers 6

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

Demo with freeform text field: jsfiddle

You need to keep track of the values inserted, you can use an array to do that as given below, then use that to remove the content

var values = [];
$('.AddTo').on('click', function() {
  values.push($(this).val());
  $('#Content').val($('#Content').val() + values[values.length - 1]);
});
$('.remove').click(function() {
  if (values.length) {
    $('#Content').val(function(i, v) {
      return v.slice(0, -values.pop().length)
    });
  }
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="Content"></textarea>
<br />
<button class="remove">Remove</button>
<input type="button" class="AddTo" value="a" />
<input type="button" class="AddTo" value="apple" />
<input type="button" class="AddTo" value="some" />
<input type="button" class="AddTo" value="value" />

how about the following?

var str = "here goes some text";
var lastIndex = str.lastIndexOf(" ");
str = str.substring(0, lastIndex);
$("div").text(str);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div></div>

this should do the trick

var string = "a for apple";

string = string.substring(0, string.lastIndexOf(" "));

Well you could add your values like this:

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

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

<script src="https://ajax.googleapis./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.

A simple solution is to create a backspace button that removes the last character from the text:

$('#Backspace').click(function() {
  $('#Content').text(function (_,txt) {
    return txt.slice(0, -1);
  });
});