I have a DIV
with some characters. How can I remove the last character from the text with each click on the DIV
itself?
This deletes a character each time you click on the div. Without more requirements, I can't give you any more.
<html>
<head>
<script>
function deleteChar(div) {
div.innerHTML = div.innerHTML.replace(/.$/, '');
}
</script>
</head>
<body>
<div onclick="deleteChar(this)">this is my div</div>
</body>
</html>
Oh, sorry, you asked for jquery... Well, this is how you do it in straight javascript.
$("div").on("click", function(){
$(this).text(function(index, text){
return text.replace(/^.(\s+)?/, '');
});
});
$("div").on("click", function(){
$(this).text(function(index, text){
return text.replace(/(\s+)?.$/, '');
});
});
$("div").on("click", function(){
$(this).text(function(index, text){
return text.replace(/r/gi, '');
});
});
See an example of each online at: http://jsfiddle.net/Xcn6s/
If you wanted to delete the first character of the text every click you could use substring. e.g.:
$("#textDiv").click(function(){
$(this).html($(this).text().substring(1));
});
Alternative to Jonathan's answer, how to delete the first character:
$("div.myDiv").click(function(){
$(this).html($(this).text().substring(1));
});
Or, remove the last character:
$("div.myDiv").click(function(){
$(this).html($(this).text().replace(/.$/g, ''));
});
Or, go crazy and remove a character from a random place:
$("div.myDiv").click(function(){
var text = $(this).text();
var index = Math.round(Math.random() * (text.length - 1));
var result = text.substring(0, index) + text.substring(index + 1, text.length - 1);
$(this).html(result);
});
Instead of random place, you can use the above function with a predefined index to remove from a specific location.
Assuming you have a reference to the div and it just contains a single text node (as your question implies), this is very simple. Here's a non-jQuery solution:
div.onclick = function() {
var textNode = this.firstChild;
textNode.data = textNode.data.slice(0, -1);
};
To supplemnt on Jonathons answer, use..
$("div.myDiv").click(function(){
$(this).html( $(this).text().replace("/.$/gi", "o") );
});
To remove the last character