18

I have a DIV with some characters. How can I remove the last character from the text with each click on the DIV itself?

Improve this question
1
  • 1
    where in the <div> text are you deleting the character from? From the end? from the start? Commented Jan 2, 2010 at 1:25

9 Answers 9

Reset to default
27

Removing First Character

​$("div").on("click", function(){
    $(this).text(function(index, text){
        return text.replace(/^.(\s+)?/, '');
    });
});​​​​​​​​​​​​

Removing Last Character

$("div").on("click", function(){
    $(this).text(function(index, text){
        return text.replace(/(\s+)?.$/, '');
    });
});

Removing a Specific Char

$("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/

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for the quick reply, but what should i replace "r" with so it delete all kinds of characters?
Which characters do you want to delete, Mikkel?
Don't write html from text, you will mis-handle < and & characters leading to potential XSS. Plus, fails when the last character in the text is \n, as . will not match a newline.
since when does jQuery now qualify for de-facto JavaScript?
asnyder: There is a jQuery tag on the question, presumably put there by the questioner.
24

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);
};
Improve this answer

6 Comments

Would the downvoter please explain why they downvoted this answer?
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?
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.
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!
btw, this doesn't work if the text is split i.e. <div>I <i>loved</i> it!</div> as the last text node is no longer the one you want to mess with. Instead you have to grab the last childNode that has a nodeType of 3.
|
3

Edit: here's the easiest way to do this without any library dependencies

function removeLastChar(node) {
    var i = node.childNodes.length;
    while (--i >= 0) {
        if (3 === node.childNodes[i].nodeType) {
            node.childNodes[i].data = node.childNodes[i].data.replace(/\S\s*$/, '');
            break;
        }
    }
}

/\S\s*$/ still means "the last non-space at the end"

Note: borrowed from Tim Down's solution and further years of web development experience, :)

Improve this answer

7 Comments

@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 hexmen.com/blog/2009/12/javascript-date-to-time/… (link only works in FF)
@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).
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!
sorry, meant slice, not substr
Not my downvote, but working on the HTML will cause problems when there is a < or & character as it will delete the trailing ; of the &entref; instead of the whole character. A browser might then fix it up by putting the ; back.
|
2

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.

Improve this answer

4 Comments

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 :)
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 :)
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
Oh you updated it, sorry i didn't notice it. It's my first time using this site.
2

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.

Improve this answer

Comments

0

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));
});
Improve this answer

1 Comment

Reads from text, writes to html: if there are any < or & characters in there you've just changed their meaning and may have injected bad JavaScript into the page.
0

To supplemnt on Jonathons answer, use..

$("div.myDiv").click(function(){
  $(this).html( $(this).text().replace("/.$/gi", "o") );
});

To remove the last character

Improve this answer

Comments

0

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>
Improve this answer

3 Comments

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?
text is defined by the id and substring is probably a better method.
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.
-1

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);
});
Improve this answer

3 Comments

What do divs with ids ending in / have to do with this?
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.
I don't think you understand the question - the OP wants the last character from within the div removed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.