We Keep Coding

Remove <li> elements that does not contain a certain "href" value inside <a>

I have bought a wordpress theme called Salient : http://themenectar.com/demo/salient-frostwave/home-basic/
It has this AJAX search (little search icon in the menu) and I want to remove any search results from the list that has a certain href value, say "portfolio" in it.
I have tried with adding following code as a "raw html element" inside script tags in the page builder plugin but it did not work
$('a[href*="portfolio"]').css.({display:"none"})
How to I implement this on wordpress?
Update :
Thanks for all the answers. There was a "." after "css" and the correct line should be :
$('a[href*="portfolio"]').css({display:"none"})
Now I need to know how to select and hide all other elements that does not contain "portfolio". i.e. the end result will only have the items with "portfolio" in it.
I tried
href!="portfolio"
But it does not select any because != matches the exact and only "portfolio" where as my "portfolio can be anywhere in the link.

To hide all elements that does NOT contain the word portfolio:
$('a:not([href*="portfolio"])').css({display:"none"});

You don't even need jQuery for this, add this to your CSS file:
a[href*="portfolio"] { display: none }
Example: http://codepen.io/anon/pen/vNvrpG

Why everybody write another code? There is a dot after css function, clear it. Replace with :
$('a[href*="portfolio"]').css({display:"none"})

$('a[href*="portfolio"]').hide();

$('a[href*="portfolio"]').closest('li').remove();

You probably don't have jquery, you can import it by adding this to HTML
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
So you can use your code $('a[href*="portfolio"]').css.({display:"none"});
Or you can use javascript (adapt as needed):
var elem = document.getElementById("yourId");
elem.parentElement.removeChild(elem);

Access class with specific text content and display:none

I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});

I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});

Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps

There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')

Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}

Cannot add class to div which is created by plugin using jQuery

I'm try to add a class to an existing div which has the id "container" (with jQuery). But the added class doesn't appear if I check it in firebug. I have to say that this div is generated by plugin and not by code. And the plugin file is compressed so I can't do any changes.
I tried to add the class to another div. That worked fine. I add it in this way:
$('#container').addClass('hdrMenu');
Note: The .addClass function is inside $(document).ready() so this cannot be the problem.
My HTML structure looks like this:
html > body > section.wrapper.transparent > div.page-box > div#container
div#container and all sub elements were generated by plugin.
Am I doing anything wrong or why can't I add a class to a plugin generated HTML code?
Suggestion appreciated :)

This could happen if your code ran before the elements of that plugin were constructed. These elements are not covered by $(document).ready(). Also, jQuery would never throw an error if this was the case, and you'll have no idea what happened.
Place your code to run after these elements are constructed.

That might be because this code that you're having is executed when there is no div with the id container. So the class name is not applied and then the content is loaded into the DOM. Here might be the example of such
<script>
/* jquery code */
$('#container').addClass('hdrMenu');
</script>
And then after all this code, you're executing the code to create the elements as
$('#container').load('data.html');
So, always remember: Place the jQuery script file at the top of the script files
<head>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
/* other script files */
</head>

Magento : Hide html elements using javascript

I'm developing an extension and I want to know how to hide an html element:
I tried this code, but it didn't work
$$('#myDiv').hide();
Where is my error?

In Jquery
$('#myDiv').hide(); //You have to include jquery library in your file
In Javascript
document.getElementById("myDiv").style.display = "none";

Possible typo? Extra "$".
Jquery:
$('#myDiv').hide();
And are you trying to do it on a click?

only one dollar sign needed
$('#myDiv').hide();

Initially this question was tagged magento.
So I assume the issue is inside a magento project.
Magento uses prototype by default.
In prototype you can hide an element like this.
$('element_id_here').hide();
$ means getElementById.
If you want to hide a set of elements, let's say with the class some_class do this:
$$('.some_class').each (function(elem){
$(elem).hide();
})
it also works for ids the same way but it's kind of useless since the id must be unique in the page.
$$('#myDiv').each (function(elem){
$(elem).hide();
})

as when I first see this post it contains a magento tag. And many of the beginners do have problem with jquery and prototype in magento.
the code to hide html with id selector in jquery is:
$('#myDiv').hide(); //# for id selector
but for prototype, its:
$('myDiv').hide(); //no # needed for id selector
but even if it do not work then open web developer tool (Ctrl + Shift + C) of your browser and look for console tab. there you might be getting error.

Clicking a div changes another div's content

I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.
How can I achieve this?

You can use jQuery, example:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-tab_700964 a').on('click', function(){
$('.tcw-content').html('hey');
});
});
</script>
<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
hello
</div>

Go take a look at jQuery. It makes this pretty easy. Your example would look like this:
$('.grp a').click(function(e) {
e.preventDefault();
$('.tcw-content').html('new content goes here');
});
To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.
jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.

Maybe you are looking for a content slider.
HTML Content Slider
:: Featured Content Slider v2.5
Examples
40 examples

do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:
http://www.w3schools.com/jquery/event_click.asp
http://api.jquery.com/click/