0

I'm trying to make a button trigger a function that only selects text that's not nested. For example, in the following code:

<a class="button">Hey<span>123</span></a>   <!-- alerts "Hey" -->
<a class="button">Hi<span>123</span></a>    <!-- alerts "Hi" -->
<a class="button">Hello<span>123</span></a> <!-- alerts "Hello" -->

Each link will call a function that alerts the text not within the <span>. E.g., the first link will trigger a function that alerts "Hey", the second "Hi", and the third "Hello" (illustrated in the comments above).

Naturally, I have the following code, but I can't figure out how to censor out the text within the <span>s (or other elements potentially within the outer anchor element).

$("div.sideBox").on("click", ".button", Handler);

function Handler(event) {
    alert($(this).html());
}
5
  • Please correct me if i doing it wrong... Jun 30, 2013 at 5:45
  • The method i used is always return a whole string , and even i replace the .html() with .val() , i have check jquery api , is there a way to retrieve the value that ignore deeper child? Jun 30, 2013 at 5:48
  • 1
  • @Nile Please correct or improve my question if i explain my problem in a wrong way Jun 30, 2013 at 6:00
  • @Nile i am sorry for the bad question , but i think the question title should change back to (How to remove part of the returned string) , because someone(newbie like me) might crash into the same problem without knowing the nested logic Jun 30, 2013 at 6:17

2 Answers 2

1

This should work provided you put a class .button to anchor tags

<a class="button">Hey<span>123</span></a>
<a class="button">Hi<span>123</span></a> 
<a class="button">Hello<span>123</span></a>

Plus use javascript DOM element property firstChild to get the text node and nodeValue to get the value of it, to ignore the child span element's text.

function Handler(event) {
    alert(this.firstChild.nodeValue);
}

Demo

8
  • At least promote good question asking by not providing an answer to his vampire question until the OP meets minimum quality standards...
    – jeremy
    Jun 30, 2013 at 5:50
  • @PSL thanks i appropriate your knowledge , i was somewhere thinking of removing part of the string and should think of how to ignore the child ... Jun 30, 2013 at 5:54
  • If you know what needs to be done, why'd you ask? The answer utilizes poor grammar, unspecific content, and a title that vaguely asks the question. I commented on your post because it's you who seems to promote this type of behavior by answering such a question. Notice I also commented on the OP.
    – jeremy
    Jun 30, 2013 at 5:54
  • 1
    Sure, flag it. My point is that an almost-20k user shouldn't encourage low-quality questions.
    – jeremy
    Jun 30, 2013 at 6:03
  • @PSL Actually, rep is an extremely important aspect here. Notice that I wouldn't (and didn't) comment on a user with a rep count such as 33. I'm simply appalled that a high-rep user would answer this question with such a low-quality format.
    – jeremy
    Jun 30, 2013 at 6:12
0

I'm going to start with the HTML you have provided. First I would remove the <grey> tags, as that is not a valid HTML tag. I would put <span> tags around the values you want to output, this will make them easy to access in our JavaScript.

HTML:

<a class="stag"><span>Hey</span>123></a>
<a class="stag"><span>Hi</span>123</a> 
<a class="stag"><span>Hello</span>123</a>

Then use this JavaScript to return those values (using JQuery as in your example):

$("a.stag").click(function() {
    alert($(this).first("span").text());
});
1
  • Thanks i updated my html format to reach W3C standard Jun 30, 2013 at 6:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.