Remove Sale Price: from Font tag

Question

Have the following HTML, using JQuery i want to remove Sale Price: how do i remove it, i tried using following Jquery but it doesnt work

JQUERY Code :

$('Sale Price:').detach();

HTML Code :

 <b class="cartvalB">
    <font class="pricecolor colors_productprice">
    Sale Price:
    <span class="cartvalB_span" itemprop="price">$175.00</span>
    </font>
    </b>

score 0 · Answer 1 · answered Feb 27 '13 at 12:58

this can be accomplished by changing your markup a little and using javascript. I's sure you can do this with jQuery as well, but I'm not all that familiar. First, you need to put your text in an element that can be accessed by javascript.

<div id="myDiv" class="cartvalB">
   Sale Price:
</div>

If you are doing this in ASP.Net you can just use the label control.

Now, you want to access the div in javascript:

function myScript(){
   var myDiv = document.getElementById('myDiv')
    myDiv.innerText =''
}

This changes the inner text of your div. You can also change the visibility, style, etc. Divs, just like all html elements, have a whole set of properties that can be accessed through the DOM. Check them out here: http://msdn.microsoft.com/en-us/library/ie/ms535240%28v=vs.85%29.aspx

I just free handed this, so its not tested but should work with a little nudging. If not, let me know.

If changing markup is an option, he doesn't even need jquery to remove the element -- he can either exclude it from the document outright or put a class on it and then set `display: none` in the stylesheet. So my hunch is changing the markup isn't an option for him. Worth finding out, though! — Eli Gassert, Feb 27 '13 at 13:04

score 0 · Answer 2 · edited May 23 '17 at 11:43

you can't query on the text like that. You have to instead select the parent element, loop the contents, and look for (and remove) the text node you need. Reference How do I select text nodes with jQuery? and Remove text with jQuery

Example:

var textContent = 'textContent' in document.body ? 'textContent' : 'innerText';

$('.colors_productprice').contents().filter(function()
{
  if(this.nodeType == 3)
  {
    var content = this[textContent];

    if(content == 'Sale Price:') return true; // found just this text node... now remove it
  }

  return false;
}).remove();

Alternatively, you can manipulate the inner HTML, such as:

var html = $('.colors_productprice').html();
html = html.replace('Sale Price:', '');
$('.colors_productprice').html(html);

This could have ramifications if you have any events bound to any child elements of colors_productprice but if not then this should be a safe and easy solution.

score -1 · Answer 3 · answered Feb 27 '13 at 12:57

-1

<script>
alert("HI...");
$(document).ready(function(){
alert($('span')[0].innerHTML);
$('span')[0].innerHTML = "";
alert($('span')[0].innerHTML);
});
</script>

</head>

<body>
<b class="cartvalB">
    <font class="pricecolor colors_productprice">
    <span>Sale Price:</span>
    <span class="cartvalB_span" itemprop="price">$175.00</span>
    </font>
    </b>
</body>

answered Feb 27 '13 at 12:57

Sarang

171
8

why `innerHTML` when you got `html()` inn jquery? – Mithun Satheesh Feb 27 '13 at 13:01

shevski · Answer 4 · 2013-02-27T13:03:53.250

-1

var span = $('.cartvalB .cartvalB_span');
$('.cartvalB font').empty().append(span);

should do the trick

edited Feb 27 '13 at 13:03

answered Feb 27 '13 at 12:58

shevski

1,012
1
10
32

1

Not sure if you can remove the `font` tag from his end-result markup. I'd probably take the safer route and `empty` the font tag (also targetable by a class) instead of the full parent span. – Eli Gassert Feb 27 '13 at 13:05
@EliGassert oh forgot the `font` tag :\ – shevski Feb 27 '13 at 13:07

Remove Sale Price: from Font tag

4 Answers4