CODEWITHSUNDEEP
javascriptjquerystring
Mikkel
Mikkel

Reputation: 365

Delete Last Char of String with Javascript

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

Upvotes: 18

Views: 42949

Answers (9)

Sampson
Sampson

Reputation: 268324

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/

Upvotes: 27

Dan Beam
Dan Beam

Reputation: 3927

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, :)

Upvotes: 3

GR1000
GR1000

Reputation:

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>

Upvotes: 0

Tim Down
Tim Down

Reputation: 324497

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);
};

Upvotes: 24

Jeff B
Jeff B

Reputation: 30099

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.

Upvotes: 2

Ashish
Ashish

Reputation: 193

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);
});

Upvotes: -1

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124758

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.

Upvotes: 2

Paul Creasey
Paul Creasey

Reputation: 28824

To supplemnt on Jonathons answer, use..

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

To remove the last character

Upvotes: 0

mopoke
mopoke

Reputation: 10685

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));
});

Upvotes: 0

Related Questions