How do I remove a specific string from withing an element and keep the rest using jQuery?

There is an autogenerated element whose original file I can't edit. It looks like this and recurs several times:

<span class="vc_table_content"></p> <p>Vitamina</span>

The span and it's class are common elements the contents vary. The content always has that erroneous html string "</p> <p>"

I need to do a jquery each by .vc_table_content and remove that string only and leave the rest intact.

thanks in advance
badwolfffAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
</p> <p> is not valid markup. DOM manipulation using jQuery and javascript only works on valid markup. The <p> tag comes after the </p> tag and marks the beginning of a paragraph that has no end. Attempting to edit the content of that <p> tag or of its parent <span> tag will affect all the content on the page after the <p>.
0
badwolfffAuthor Commented:
I know all this. But that bit there is a mistake in some php code and it does not correspond to any open or closed p tags. i tried removing it using firebird and nothing breaks.
All I want to do is cycle through jquery only on that class and remove it.
How to do it?

thanks
0
badwolfffAuthor Commented:
can you not just help me remove them for now? If it breaks the code then I will comment out the script and contact the programmer who wrote the php code to fix it *(which I will do anyway but I need a quick fix now)
thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tom BeckCommented:
I'm saying it cannot be done. Maybe an expert smarter than I will have a solution.

Here is my experiment. Open the javascript console in your browser to see how the malformed <p> tag appears to the DOM. That's what jQuery will see as well. jQuery can only manipulate what it sees in the DOM, the way the browser interprets the markup, not the actual markup.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
	console.log("jQuery html(): " + jQuery('span.vc_table_content').html());
	console.log("jQuery text(): " + jQuery('span.vc_table_content').text());
	
	// THIS LINE WILL REMOVE ALL CONTENT ON THE PAGE, NOT JUST HE MALFORMED <p> ELEMENT
	// IT RESULTS IN THE <span> TAG BECOMING UNCLOSED AS WELL
	jQuery('span.vc_table_content')[0].remove('p');
});
</script>
</head>
<body>
<span class="vc_table_content"></p> <p>Vitamina</span>
<div class="some-other-content">Welcome to WordPress.</div>
</body>
</html>

Open in new window

0
badwolfffAuthor Commented:
This is what I get as output:

jQuery html(): &lt;/p&gt;
&lt;p&gt;Vitamina

/inform...nerali/ (line 491)

jQuery text(): </p>
<p>Vitaminamg/100gRDA%DVFunzionalitàVitamina E (α-Tocoferolo)15,812,00131,7È un potente antiossidante efficace contro i radicali liberiVitamina B1 (Tiamina)1,91,10172,7È necessaria per la sintesi dell’emoglobina nel sangue e per la produzione di acido gamma-amminobutirrico (GABA). Inoltre è un coenzima vitale in alcune reazioni metaboliche, in particolare quelle dei carboidratiVitamina B2 (Riboflavina)0,51,4035,7La riboflavina è coinvolta in moltissime reazioni metaboliche che possono riguardare anche altre vitamineVitamina B3 (Niacina)6,816,0042,6Ha una azione di prevenzione della pelagra e agisce sui livelli del colesterolo cattivo (LDL) e dei trigliceridi Vitamina B6 (Piridossina)1,31,4092,9È coinvolta in molte reazioni e processi metabolici, in particolare nel metabolismo degli amminoacidiVitamina B9 (Acido Folico)281200,00140,5Interviene nella sintesi degli acidi nucleici (DNA e RNA), nel metabolismo degli aminoacidi, nella produzione di globuli rossi. Previene l’anemiaAcido pantotenico2,36,0038,3È il costituente del coenzima-A, il quale a sua volta è importantissimo per sintetizzare e metabolizzare le proteine, i carboidrati, i grassi</p>
<p></p>
<p>Mineralemg/100gRDA%DVFunzionalitàSelenio79,255,00144,0È un nutriente essenziale, fa parte di alcuni importanti enzimi e inibisce gli effetti tossici dei metalli pesanti.Zinco12,310,00123,0È un oligoelemento essenziale presente in in tutte le categorie enzimaticheFosforo842700,00120,3È un micronutriente essenziale per i processi metabolici, per le funzioni nervose, per la struttura di: denti, ossa, cellule. Il fosforo rappresenta più dell’1% del peso corporeoRame0,81,0080,0È contenuto in circa 30 tra enzimi e co-enzimi, in particolare il rame è richiesto per la formazione e il mantenimento della mielinaMagnesio239375,0063,7È responsabile di molti processi metabolici essenziali come: la formazione dell’urea,  la trasmissione degli impulsi muscolari, la trasmissione nervosa e la stabilità elettrica delle celluleFerro6,314,0045,0Il ferro è essenziale per la vita di tutti gli esseri viventi

</p>
<p>

Open in new window

0
badwolfffAuthor Commented:
Maybe the problem is in this PHP file which generates that code?

<?php
if(!function_exists('convert_encode_chars')) {
    function convert_encode_chars($string) {
        return preg_replace('/\&amp\;(\#|cent|pound|yen|euro|sect|copy|reg|trade)/', '&$1', $string);
    }
}

$custom_css = $el_class = $vc_table_theme = '';
extract(shortcode_atts(array(
    'vc_table_theme' => '',
    'el_class' => ''
    ), $atts));
if(empty($content)) {
    echo '<table><tr><td>Empty table</td></tr></table>';
    return;
}
if(!empty($vc_table_theme)) {
    $custom_css = ' class="vc-table-plugin-theme-'.$vc_table_theme.'"';
}
if(!empty($el_class)) {
    $el_class .= ' '.$el_class;
}
$table_data = vc_table_parse_table_param($content);

$el_class = $this->getExtraClass($el_class);
$css_class = apply_filters(VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, 'wpb_vc_table wpb_content_element'.$el_class, $this->settings['base']);

$output = '<div class="'.$css_class.'">';
$output .= '<table'.$custom_css.'>';
foreach($table_data as $index => $row) {
    $output .= '<tr'.($index===0 ? ' class="vc-th"' : '').'>';
    foreach($row as $cell) {
        $style = empty($cell['css_style']) ? '' : ' style="' . implode('', $cell['css_style']) . '"';
        $class = empty($cell['css_class']) ? '' : ' class="'. implode(' ', $cell['css_class']) . '"';
        $output .= '<td'.$style.$class.'><span class="vc_table_content">' . convert_encode_chars(htmlspecialchars($cell['content'])) . '</span></td>';
    }
    $output .= '</tr>';
}
$output .= '</table>';
$output .= '</div>';
echo $output;

Open in new window

0
Ahmed MerghaniSoftware EngineerCommented:
Try to add this line in the jQuery part:
$(".vc_table_content").html("</p> <p>");

Open in new window

0
badwolfffAuthor Commented:
Hi Ahmed. Sorry I didn't get you. Try to add this code where? In my page's document.ready?

If that is what you meant, I tried it and it made all my content disappear from both the tables :(
0
Ahmed MerghaniSoftware EngineerCommented:
Do you have any contents in side "vc_table_content" other than "</p> <p>Vitamina" ??
0
badwolfffAuthor Commented:
Yes. You can have a look here:
http://temp.novelbread.com/informazioni/vitamine-e-minerali/

there are four instances where this happens. At the start and at the end of each table.
0
badwolfffAuthor Commented:
Could I not just create a variable and using a jquery each get every vc_table_content's full contents. Then use a regex (which is my I asked for help here) to remove that "</p> <p>" pattern and then set the variable's changed content as the .html() of each vc_table_content again?

I vaguely understand how to do this but I need a hand. I think it can be done this way.
0
Tom BeckCommented:
Try adding this to the document ready function at the bottom of the page.
jQuery('span.vc_table_content').each(function(){
		var pTag = jQuery(this).html();
		if (pTag.indexOf('&gt;' != -1)) {
		   pTag = pTag.substr(pTag.lastIndexOf(';')+1);
		   jQuery(this).html(pTag);
		}
	});

Open in new window

0
badwolfffAuthor Commented:
Thanks! I did that but that has also removed the rest of the contents of the span!

have a look:
Vitamine-e-minerali---Novel-BreadNov.png
Any ideas?
0
badwolfffAuthor Commented:
and this is how it looks without your code:
Vitamine-e-minerali---Novel-BreadNov.png
0
badwolfffAuthor Commented:
The ones where the </p> <p> is before the text it works fine.
When the string is AFTER, then it hides the whole span's text :(
0
Tom BeckCommented:
jQuery('span.vc_table_content').each(function(){
		var pTag = jQuery(this).html();
		if (pTag.indexOf('&gt;' != -1)) {
		   pTag = pTag.replace('&lt;/p&gt;', '');
                   pTag = pTag.replace('&lt;p&gt;', '');;
		   jQuery(this).html(pTag);
		}
	});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.