I have a DIV with some characters. How can I remove the last character from the text with each click on the DIV itself?
views:
2003answers:
9
+4
A:
Removing First Character
$("p").click(function(){
// removes the first character (and orphaned spaces) on each click
$(this).html( $(this).text().replace(/^.(\s+)?/, "") );
});
Removing Last Character
$("p").click(function(){
// removes the last character (and orphaned spaces) on each click
$(this).html( $(this).text().replace(/(\s+)?.$/, "") );
});
Removing a Specific Char
$("div.myDiv").click(function(){
// replace all r's (both big and small) with o's.
$(this).html( $(this).text().replace(/r/gi, "o") );
});
Of course you'd have to be careful not to forget <br/> and <hr/> and <strong>, etc, which all include that single character, and also may exist within your div.
Jonathan Sampson
2010-01-02 01:25:47
Thanks for the quick reply, but what should i replace "r" with so it delete all kinds of characters?
Mikkel
2010-01-02 01:30:03
Which characters do you want to delete, Mikkel?
Jonathan Sampson
2010-01-02 01:31:08
bobince
2010-01-05 23:37:23
since when does jQuery now qualify for de-facto JavaScript?
asnyder
2010-06-25 15:02:24
asnyder: There is a jQuery tag on the question, presumably put there by the questioner.
Tim Down
2010-06-25 15:18:24
+1
A:
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.
Tatu Ulmanen
2010-01-02 01:30:11
Mikkel, could you please tell us what is it you wanted? Tatu provided numerous examples - none of us knows what it was you actually wanted :)
Jonathan Sampson
2010-01-02 01:41:40
Yea, that would have been nice to know, and if Mikkel had just explained that in his original question, none of us would have had to do so much guessing :)
Tatu Ulmanen
2010-01-02 01:44:29
I just wanted to remove the last character no matter what character it was. Your code required a specific character. But i appreciate you tried to help. Thanks :D
Mikkel
2010-01-02 01:46:06
Oh you updated it, sorry i didn't notice it. It's my first time using this site.
Mikkel
2010-01-02 01:52:55
+1
A:
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.
Jeff B
2010-01-02 01:30:22
A:
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));
});
mopoke
2010-01-02 01:30:42
bobince
2010-01-05 23:34:05
A:
To supplemnt on Jonathons answer, use..
$("div.myDiv").click(function(){
$(this).html( $(this).text().replace("/.$/gi", "o") );
});
To remove the last character
Paul Creasey
2010-01-02 01:31:03
A:
Its easy by using the attribute$= CSS3 selector which means "ends with" in your jQuery selection:
To Delete 1st character:
$("div[id$=/]").each(function(){
this.id = this.id.substr(1);
});
To Delete Last Character:
$("div[id$=/]").each(function(){
this.id = this.id.substr(0,this.id.length - 1);
});
Ashish
2010-01-02 01:36:36
Using Adobe® Browser Lab, I tested this code in IE6, IE7, Firefox 2.0 and Firefox 3.0, Safari 3.0. I have also tested locally in Safari 4.0 and Firefox 3.5. In all browsers it worked properly, and removed the trailing / from the id.
Ashish
2010-01-02 01:42:33
I don't think you understand the question - the OP wants the last character from within the div removed.
Nick Presta
2010-01-02 07:33:59
you're not changing the content of the node, you're changing the id of it...
Dan Beam
2010-01-04 20:07:51
A:
Plain JavaScript:
<div id="text">This is some text</div>
<script>
var node = text.firstChild;
var nodeValue = "";
var nodeValueLength = 0;
text.onclick = function () {
nodeValue = node.nodeValue;
node.nodeValue = nodeValue.substring(0, nodeValue.length - 1);
};
</script>
This won't work. Text nodes don't raise click events. Where is the `text` variable defined? Why build up the new node value a character at a time?
Tim Down
2010-01-02 12:23:08
My first point was invalid because I misread one line, so sorry about that. You would be better off defining `text` with `document.getElementById("text")`, since not all browsers (possibly only IE does) create references to elements from their IDs. Also, `nodeValue.slice(0, -1)` is more concise than the `substring` version.
Tim Down
2010-01-04 13:28:55
A:
I think everyone's making this slightly too complicated. If there is no whitespace (and you should be able to control this...):
$( '#thediv' ).click( function( ){ this.innerHTML = this.innerHTML.slice(0,-1); } );
if there is whitespace:
$( '#thediv' ).click( function( ){ this.innerHTML = this.innerHTML.replace(/\S\s*$/,''); } );
/\S\s*$/ means "the last non-space at the end"
Dan Beam
2010-01-02 10:15:10
@Tim Down - I don't know why it was voted down, either. there's alot of trolls on StackOverflow, but there's also people that know more than me (so you never quite know). don't worry, my feelings aren't hurt, haha. Ash Searle agrees with my use of negative numbers in `String.prototype.substr` http://hexmen.com/blog/2009/12/javascript-date-to-time/#li-comment-31380 (link only works in FF)
Dan Beam
2010-01-04 20:12:31
@Dan Beam - yes, I used the same slice trick in my answer. I have previously read that article you linked to (and left a comment).
Tim Down
2010-01-04 20:56:59
hahaha, that's funny. Ash is a smart guy. do you have any clue who he works for? it's a very bold statement to suggest changes to the most popular web page on the planet (google.com), haha!
Dan Beam
2010-01-04 23:39:38
Not my downvote, but working on the HTML will cause problems when there is a `<` or `` of the `` instead of the whole character. A browser might then fix it up by putting the `;` back.
bobince
2010-01-06 00:29:28
+3
A:
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);
};
Tim Down
2010-01-02 12:25:46
I didn't vote it down, but are you sure `this.firstChild.data` is what you want to do (OP didn't say there were any children in the div, and does `.data` work in all browsers)? why not use `this.innerHTML`?
Dan Beam
2010-01-04 20:09:33
I took "I have a DIV with some characters" to mean something like `<div>blah blah</div>`, in which case the first (and only) child is a text node. The `data` property of text nodes is supported in all major browsers (including IE back to version 5). It's much quicker than using `innerHTML` because all it has to do is change one text property and re-render it in the document, while `innerHTML` has to build the innerHTML, parse it into a DOM node tree and then reinsert it into the document. `data` is also specified in the DOM standard and behaves uniformly across browsers, unlike innerHTML.
Tim Down
2010-01-04 20:53:51
`data` is DOM Level 1 Core and absolutely solid everywhere; it's fine as long as you're sure there's exactly one text node child. At least this answer manages not to allow HTML injection, and doesn't get stuck on newlines, unlike most of the others here!
bobince
2010-01-05 23:45:05