We Keep Coding

How can I remove a css portion when a button is clicked

I need to remove this css portion from a navbar-collapse when I click a button:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
I tried something like this:
$("#toggleButton").click(function()
{
$(".navbar-collapse").remove("ul.nav","li.dropdown","ul.dropdown-menu");
});
But it doesn't work. I want to have a responsive navbar menu and when it collapse remove the dropdowns from that view.

Have you tried removeClass?
$(".navbar-collapse").removeClass("nav dropdown dropdown-menu");
If you want to remove the elements from the DOM
$(".nav, .dropdown, .dropdown-menu").remove();

You simply need to just set css attribute display to none on class .dropdown-menu applied to ul element.
ul.nav li.dropdown:hover doesn't have any relevancy here since they are used as an element locator and does not have display:none applied to them.
$("#toggleButton").click(function()
{
$('ul.dropdown-menu').css('display','none');
});
To remove the entire css attributes,
$("#toggleButton").click(function()
{
$('ul.dropdown-menu').removeAttr('style');
});

There's more than one way to accomplish this but you can do it by changing the css when you click the button
Here's how you would accomplish that:
$("#toggleButton").click(function()
{
$("ul.nav li.dropdown:hover > ul.dropdown-menu").css({"display": "none"});
});

Try this :
$("#toggleButton").click(function(){
$(".navbar-collapse").remove("ul.nav li.dropdown > ul.dropdown-menu");
});

hide drop down menu after clicking doesn't show it after rehover

my menu items don't redirect to another page, so after clicking them they don't hide. I can hide them using javascript or jquery, but they hide forever. I've tried every single suggestion out there but none of them work for me. this is my html:
<nav>
<ul>
<li class="windows">Windows
<ul>
<li>Tile</li>
<li>Close all</li>
</ul>
</li>
</ul>
</nav>
my css:
nav ul ul {
display: none;
position: absolute;
top: 100%;
z-index: 1003;
}
nav ul li:hover > ul {
display: block;
height: auto;
}
and my javascript for tile:
tileObject = $('a.tile');
tileObject.click(function () {
$('.windows ul').hide();
tileAction();
});

If you hide your menu using $('.windows ul').hide(); you will need to do a $('.windows ul').show();(or smething equivalent) to display it again.
As $('.windows ul') will be hidden. You will need do bind the event to another element, for example
$('li.windows').click(function(){
$('.windows ul').show()
});`
--EDIT--
For that effect you don't need javascript. Check the fiddle. Just use the selector :hover. Then, if you want to do some actions using JS, just use the hover event. Take a look to the docs
--EDIT 2--
I got it now. Check this. You need to unbind the hover event just before hide the element. Then after you hide the element you bind it again.

You can try this one:
$(document).ready(function(){
$("li a.tile").click(function(){
$("body").off("hover", "li.windows");
$("nav ul li ul").hide();
$("li.windows").hover(function(){
$("nav ul li ul").show();
});
});
});
DEMO

If you HIDE and element then you need to SHOW it back again. First of all you have top:100% in your css and you dont need this.

How can I remove caret on Bootstrap 3 menu and show dropdown on hover?

I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).
On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.

I get it, you don't want the users to see the "caret" on the desktop. This could be achieved with minimal amount of Media Queries. It should be something along these lines. I got the Desktop breakpoint Media query code right from Bootstrap 3 Docs.
#media (min-width: 1200px) {
.navbar-nav .caret {
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
}

You can use Jquery hover to activate the drop-down
Try this
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
if($(window).width() > 750)
{
$('b.caret').hide()
}
});
DEMO

jQuery on list item hover, show delete button for that individual item

Below is a preview of what I have:
On the right is when I hover. What I want is for the delete icon to only show for that hover item.
<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(".removeService").show();
});
});
</script>
This is probably a very simple fix, but if anyone could point me in the right direction I would really appreciate it.
Thanks!

If you want the delete span to show only when hovered over and hidden when the mouse exits, you can use an 'overload' for the .hover() function by providing a second function that hides the delete span.
See this fiddle here for an example.
A very simplified example could look like this:
$(document).ready(function(){
$('.remoteService').hide()
.click(function(){alert('delete!');});
$('#dashboard ul li span').hover(
function(){ //this is fired when the mouse hovers over
$(this).find('.remoteService').show();
},
function(){ //this is fired when the mouse hovers out
$(this).find('.remoteService').hide();
});
});
I hope this helps!

<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(this).find(".removeService").show();
});
});
</script>
This assumes that .removeService is nested within #dashboard ul li span. If this is not the case, please provide your html.
In the code this is the actual span which is hovered on. find will search within that span for all elements with the removeService class.

Edit:
Used image tag instead of background-image(see DEMO link at the bottom) to make it click-able.
DEMO here.
Why not use CSS :hover to get the same effect.
DEMO here

You have to do this with jQuery, you can achieve the same behavior with pure CSS:
#dashboard ul li .removeService {
display: none;
}
#dashboard ul li:hover .removeService {
display: inline;
}
Example on jsfiddle

Hide Div When Clicked

I've got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
<ul>
<li>
Menu Header
<div class="subMenu" onClick="closeMenus();">Menu Content</div>
</li>
</ul>
</div>
The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I'd like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn't reappear. It appears that CSS won't override the JavaScript display property. Most, if not all, of the links won't be going to other pages, just calling more JavaScript.
Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?

Use JQuery more fully -- look into the .toggle() command and bind it via click:
$('.subMenu').click(function() {$(this).toggle();});
Then you can eliminate most of your other code.

You're trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/
$('.subMenu').click(function() {
$(this).hide();
});
$('#mainMenu').hover(function() {
$(this).find('.subMenu').show();
}, function() {
$(this).find('.subMenu').hide();
});

Stryle attribute has highest priority.
$('.ftpBrowseSubMenu').css('display','none');
make
<div style="display:none">
, so rule
#mainMenu ul li:hover
has lower priority against style attribute. So, you have to do everything with javascript.

Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn't be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.