Shadow Shadow - 1 year ago 63
jQuery Question

Remove an element based on the content of a different element

I've done a fair amount of very minor editing on jquery scripts in order to suit my needs, but I've never written any script at all before. And now I find myself completely at a loss so I really hope someone can help me with this.

I have the following script to create tabs on a webpage:

$(document).ready(function() {

(function ($) {
$('.biog ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');

$('.biog ul.tabs li a').click(function (g) {
var tab = $(this).closest('.biog'),
index = $(this).closest('li').index();

tab.find('ul.tabs > li').removeClass('current');

tab.find('.content').find('div.inner').not('div.inner:eq(' + index + ')').slideUp();
tab.find('.content').find('div.inner:eq(' + index + ')').slideDown();

} );


However these tabs contain data input by different users, and occasionally one of the tabs may be completely empty as it does not apply to the person.

I'm able to remove the content using this line:

$(".history").filter(":contains('No Information')").remove()

But that only removes the contents of the tab while leaving the tab itself in the list of options to be selected.

Basically, I would like to remove the History tab when the Biography div contains the string "No Information" - and I have no idea where to go from here. I hope this all makes sense, and I hope that someone is able to help me out. I'd really appreciate it!

--- EDIT ---

The HTML of the content is completely separate from the tabs.

<div class='biog'>
<h1> <!-- |field_17| --> </h1>
<div class='content'>
<div class='portrait inner'>
<div class='vitals inner'>
<div class='info'>
<div class='right'>
<div class='topgif'></div>
<div class='bottomgif'></div>
<div class='in'>
<div class='history inner'>
<div class='info'>
<div class='in'> <!-- |field_40| --> </div>
<div class='plots inner'>
<div class='info'>
<div class='shipgif'></div>
<div class='selfgif'></div>
<div class='ship'>
<div class='bottomright'>
<div class='links'>
<div class='plotinfo'> <!-- |field_47| --> </div>
<ul class='tabs'>
<li><a href='#'>portrait</a></li>
<li><a href='#'>vitals</a></li>
<li class='histtab'><a href='#'>history</a></li>
<li><a href='#'>plot</a></li>

With the content appearing below this unordered list.

The only tab I'm actually trying to hide is the History one - the others always have information in them.

Answer Source

Try this:

$(".history").filter(":contains('No Information')").parent().remove()


If I'm right, according to your code snippet your tabs are and content are arrange in relative order so you could do the following

var index = $(".content").find(".history").filter(":contains('No Information')").index();

$('.biog ul.tabs li').eq(index).remove();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download