We Keep Coding

Removing a class from navbar to make it collapse upon navbar item being clicked

I have a navbar that's inherited from some legacy code - and I'm trying to get the mobile version to collapse when a menu item is clicked.
http://shitnavbar.brodiedigital.io/
If you resize the window and scroll beyond the first 100vh of the page the hamburger menu will appear.
clicking will reveal the menu items
clicking a menu item WILL scroll you to correct area of page, but not collapse/close the menu
At the moment I'm using some jquery to attempt to do this by targeting just a single item on the menu - 'BIKES', with little joy:
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
html for the section is
<div class="menu active">
<div class="menu_content d-flex flex-column align-items-center justify-content-center">
<ul class="menu_nav_list text-center">
<li>LOCATIONS</li>
<li>BIKES</li>
<li>CONCIERGE</li>
<li>ABOUT</li>
<li>ENQUIRE</li>
<li>CONTACT</li>
</ul>
</div>
</div>
Jquery isnt my strong point, but feel like im having a bit of a brain fart moment here - something very simple I'm doing wrong.
Has anyone got an insight into why clicking bikes is not removing the class 'active' from the div that has 'menu' class in it?

Your selector is probably the problem, the following will work for all your nav links
$('.menu_nav_list li a').on('click', function(){
$('.menu').removeClass('active');
});

You have no element with an id of _bikes that is why your jquery doesn't work. Use a selector that will work:
$('.menu_nav_list a').on('click', function(e){ // target all anchors in the menu nav list
e.preventDefault(); // prevent default action of link click
$(this).closest('.menu').removeClass('active'); // get the closest ancestor of the link that has a class of .menu
});
.active a {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu active">
<div class="menu_content d-flex flex-column align-items-center justify-content-center">
<ul class="menu_nav_list text-center">
<li>LOCATIONS</li>
<li>BIKES</li>
<li>CONCIERGE</li>
<li>ABOUT</li>
<li>ENQUIRE</li>
<li>CONTACT</li>
</ul>
</div>
</div>

Your website has console errors. It's from this:
<script type="text/javascript">
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
</script>
When you run jQuery code, you need to include this code below the link to the jQuery file, right now you are tryint to run jQuery code before the jQuery library has been loaded.
And also wrap it in something to wait for the document to become ready
<script type="text/javascript">
$(function() {
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
});
</script>
It also looks like you are including jQuery library twice, and at two different versions. v3.2.1 and v1.11.0
(Also as a side note, the codebase might be legacy, but that site looks really slick!)

In your code above you used .on() incorrectly and you are also targeting the element
if you wanted to target the href you would need to put the following inside the selector a[href="_bikes"] because currently you are trying to select a ID not the href in your selector.
You need to add the following code to your javascript file and it will close the menu if you click on any link inside you nav
$(document).on('click','.menu_nav_list a', function(){
$('.menu').removeClass('active');
});

Delete html with js [duplicate]

I have some list item tags in my jsp. Each list item has some elements inside, including a link ("a" tag) called delete. All that I want is to delete the entire list item when I click the link.
Here is the structure of my code:
$("a").click(function(event) {
event.preventDefault();
$(this).parent('.li').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="191" class="li">
<div class="text">Some text</div>
<h4>Text</h4>
<div class="details">
<img src="URL_image.jpg">
<span class="author">Some info</span>
<div class="info"> Text
<div class="msg-modification" display="inline" align="right">
<a name="delete" id="191" href="#">Delete</a>
</div>
</div>
</div>
</li>
But this doesn't work. I'm new at jQuery, so I tried some things, like for example:
$(this).remove();
This works, it deletes the link when clicked.
$("#221").remove();
This works, it deletes the indicated list item, but it's not "dynamic".
Can someone give me a tip?

Simply use the .closest() method: $(this).closest('.li').remove();
It starts with the current element and then climbs up the chain looking for a matching element and stops as soon as it found one.
.parent() only accesses the direct parent of the element, i.e. div.msg-modification which does not match .li. So it never reaches the element you are looking for.
Another solution besides .closest() (which checks the current element and then climbs up the chain) would be using .parents() - however, this would have the caveat that it does not stop as soon as it finds a matching element (and it doesn't check the current element but only parent elements). In your case it doesn't really matter but for what you are trying to do .closest() is the most appropriate method.
Another important thing:
NEVER use the same ID for more than one element. It's not allowed and causes very hard-to-debug problems. Remove the id="191" from the link and, if you need to access the ID in the click handler, use $(this).closest('.li').attr('id'). Actually it would be even cleaner if you used data-id="123" and then .data('id') instead of .attr('id') to access it (so your element ID does not need to resemble whatever ID the (database?) row has)

what about using unwrap()
<div class="parent">
<p class="child">
</p>
</div>
after using - $(".child").unwrap() - it will be;
<p class="child">
</p>

Use parents() instead of parent():
$("a").click(function(event) {
event.preventDefault();
$(this).parents('.li').remove();
});

Delete parent:
$(document).on("click", ".remove", function() {
$(this).parent().remove();
});
Delete all parents:
$(document).on("click", ".remove", function() {
$(this).parents().remove();
});

I have stumbled upon this problem for one hour. After an hour, I tried debugging and this helped:
$('.list').on('click', 'span', (e) => {
$(e.target).parent().remove();
});
HTML:
<ul class="list">
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
</ul>

You could also use this:
$(this)[0].parentNode.remove();

$('#' + catId).parent().remove('.subcatBtns');

Using jQuery to add class to containing li when a checkbox inside is clicked

Objective
Highlight (by adding a background-color to) the "row" <li> if a (nested) checkbox inside that row is clicked.
Background
In this feature I am working on the interface for a file management system. When a user clicks the checkbox they can then delete all the files checked. to give them visual feedback, i want all of their selected files to have a background color. This will be done by clicking a checkbox, then i want the <li> to be colored.
Current state
I found various helpful answers on stackoverflow but have a gap in knowledge and trying to fill that in. Most answers use the parent element. But that only helps me by coloring that specific parent that holds the checkbox.
Code
I have this demo on codepen
jQuery
$("#this-list :checkbox").on('click', function(){
$(this).parent().toggleClass("checked");
});
CSS
.checked {
background: red;
}
HTML
<div class="container">
<ul id="this-list">
<li>
<div class="row">
<div class="col-md-2">
<input type="checkbox" />
song.mp3
</div>
<div class="col-md-2">
2011
</div>
<div class="col-md-2">
1 gb
</div>
<div class="col-md-2">
2 min
</div>
</div>
</li>
<!-- More <li>s -->
</ul>
</div>

you could use closest to get the closest checkboxs li element:
$("#this-list :checkbox").on('click', function(){
$(this).closest('li').toggleClass("checked");
});
this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector (li in this case).

Use .parents([selector])
For the li you want this
$(this).parents('li').toggleClass("checked");
Or if you only want the row highlighted
$(this).parents('.row').toggleClass("checked");
Or if you only want the cell highlighted
$(this).parents('.col-md-2').toggleClass("checked");

You are very close! You can use the .parents() method of jQuery and pass in the class .row. It would look like this:
$("#this-list :checkbox").on('click', function(){
$(this).parents(".row").toggleClass("checked");
});
EDIT:
As #showdev mentioned, if you want the li element, you can just do:
$(this).parents("li").toggleClass("checked");

Simply add another .parent() to add the checked class to the row (the parent of the parent):
$(this).parent().parent().toggleClass("checked");
See this CodePen fork.

As in this Codepen
$("#this-list :checkbox").on('click', function(){
$(this).closest("li").toggleClass("checked");
});
Alternatively, since the checkbox is contained inside a div which is inside the target li you can use: Codepen
$("#this-list :checkbox").on('click', function(){
$(this).parent().parent().toggleClass("checked");
});

Auto focus on a tab

I am trying to set auto focus on a tab when page loads, but I can't make it work. I have created a fiddle, and as you can see in the code, I am trying to set focus on the tab with class="test
Can anyone see what I do wrong?
http://jsfiddle.net/qL2W4/2391/
<div id="mydiv">
<ul>
<li>rr</li>
<li class="test">gg</li>
<li>mm</li>
</ul>
</div>
$("#mydiv").tabs();
$("#mydiv").find(".test").focus();

You can use the selected option for this:
$("#mydiv").tabs({ selected: 1 });
Updated Fiddle
If you want it to work based on the li with a specific class you can do it by getting the index of the li with the selected class and passing it into the tabs options:
var selected = $(".test").index();
$("#mydiv").tabs({ selected: selected });
Fiddle

Try next :
$("#mydiv").tabs();
$("#mydiv").find(".test a").trigger("click");
Or, if you need only switch tab - use active property:
$("#mydiv").tabs();
$("#mydiv").tabs({
active:1
});
p.s. in my opinion second method is better, if you not need to emit click event for something other.

You can simply simulate a click:
<div id="mydiv">
<ul>
<li>rr</li>
<li>gg</li> <!-- NOTE CHANGE -->
<li>mm</li>
</ul>
</div>
$( document ).ready(function() {
$("#mydiv").tabs();
$('.test').click();
});

How to remove cloned elements

With Jquery, I am trying to make a function similar to the filtering system used in this website(example)
If you click one of the filter elements, it will be displayed in another area. You can remove the selected filter by just clicking it.
My code works for cloning a filter element and displaying it in another area but
I am having a trouble with removing it.
I did hours of research but could not find any solution so your help will be greatly appreciated!
Here is my code
---html---
<div id="filter-selected>
<ul>
<!--selected element comes here -->
</ul>
</div>
<div id="filter-options">
<ul>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value1</span>
</li>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value2</span>
</li>
</ul>
</div>
---Jquery---
$('#filter-options > ul > li').click(function(event){
var $filter = $(this).children('span').clone();
$filter.appendTo('#filter-selected > ul').wrap('<li class="filtering"></li>');
});
$(.filtering').click(function(){
$(this).remove();
});

Since the elements are created dynamically, You need event delegation
$('#filter-selected').on('click', '.filtering', function(){
$(this).remove();
});

You are missing string quote on left side ' of .filtering which might be a problem.
$(.filtering').click(function(){