We Keep Coding

How to delete a specific <li> of a particular <ul> from a list of several <ul>s

I have 10-15 unordered lists in my HTML page, each containing a delete button next to each list item.
For each li to be uniquely identifiable, I have assigned to its id: its parent's id and its own category_name.
However, when I perform the remove() -- it doesn't work. The li does not get removed from its parent.
I already have an input box associated with each ul to add li's to the specific ul which is working.
<script>
function remove_category(ident){
$("#"+ident).remove;
}
function add_category(ul_id, input_id){
var ul = $("#"+ul_id);
var added_category = $("#"+input_id).val();
$(ul)
.append('<li class="list-group-item" id="'+added_category+'">'+added_category+'<button type="button" id="delete-category-btn" onclick="remove_category('+ul_id+added_category+');"><i class="fa fa-times delete-fa" aria-hidden="true"></i></button></li>')
}
</script>
The remove_category() function does not perform any action.

Probably because of the event handler is not taking dynamic element. Use .on to make the click event work on dynamic element
Here is the example.
$(document).on("click", ".added-category", function() {
var parent = $(this).closest("li");
parent.after("<li>" + parent.html() + "</li>");
});
$(document).on("click", ".remove-category", function() {
var parent = $(this).closest("li");
parent.remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
some text
<button class="added-category">Add</button>
<button class="remove-category">Remove</button>
</li>
</ul>

Try to use this,
function removeLi(dhis){
dhis.parent().remove()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li >list 1 <button onclick="removeLi($(this))">remove</button></li>
<li>list 2 <button onclick="removeLi($(this))">remove</button></li>
<li >list 3 <button onclick="removeLi($(this))">remove</button></li>
<li >list 4 <button onclick="removeLi($(this))">remove</button></li>
<li >list 5 <button onclick="removeLi($(this))">remove</button></li>
</ul>

Hamburger menu from an array

I need help with my code for a hamburger menu. I need to use this array to create the menu elements in jquery:
var menu = [{
'title': 'Save',
'onclick': function() {
alert('Open clicked');
}
}, {
'title': 'Load',
'onclick': function() {
alert('Close clicked');
}
}, {
'title': 'Hide menu',
'onclick': function() {
//put a code to close menu
}
}];
Here is what I have so far and I need to use the array above to update it to work with the array.
jQuery
$(document).ready(function() {
$('#menulink').click(function(event) {
event.preventDefault();
if($('.navigation-wrapper').hasClass('show-menu')) {
$('.navigation-wrapper').removeClass('show-menu');
$('.navigation').hide();
$('.navigation li').removeClass('small-padding');
} else {
$('.navigation-wrapper').addClass('show-menu');
$('.navigation').fadeIn();
$('.navigation li').addClass('small-padding');
}
});
});
HTML
<a id="menulink" href="#">
<div class="hamburger-wrapper">
<div class="inner-hamburger-wrapper">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
<div class="menu-title"><p>Menu</p></div>
</div>
</a>
<ul class="navigation">
<li>Home</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
</ul>
It would be nice to get any help that I can.

Using jQuery .append() you can append the array items to a list for creation.
We have to target the functions seperately, but included is a solution where you could put them inline, if you converted the menu[i] items to strings.
// Generate an element, append index to referencing the executing function
$.each(menu, function(index, element) {
$('ul.navigation').append('<li data-index="'+index+'">'+element.title+'</li>');
});
// Run the executing function associated with item
$('ul.navigation > li').click(function() {
var item = $(this).attr('data-index');
menu[item].onclick();
});
// This could be done easier like so:
// $.each(menu, function(index, element) {
// $('ul.navigation').append('<li data-index="'+index+'">'+element.title+'</li>');
// });
// but would require modifying the menu[i] items' functions to just be strings
Here's an updated Fiddle.

Show particular div and hide all another after click event

I have three div elements:
<div class="hide_banner" id="1"><img src="1.png"></div>
<div class="hide_banner" id="2"><img src="2.png"></div>
<div class="hide_banner" id="3"><img src="3.png"></div>
After the page is loaded the user should see the 1st div only. Here is the JS/jQ code (this works perfectly):
$(document).ready(function() {
$('.hide_banner').not('#' + 1).hide(3000);
});
The user can pick another banner by click at links on this page:
<ul class="dropdown-menu" role="menu">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
After click for example on the 3rd link (href="#3") the div with id="1" should hide and the div with id="3" shold be shown. I have an idea how to maintain the problem combaining with PHP, but i want to solve it with JS/jQ only, so please help! ;) Here is my JS/jQ code which doesn't work:
$(document).ready(function() {
$('.hide_banner').not('#' + 1).hide(3000);
$('a').click(function() {
var id = $(this).attr('href');
if(id == 1) {
$(id).show(3000);
$('#2').hide(3000);
$('#3').hide(3000);
}
if(id == 2) {
$(id).show(3000);
$('#1').hide(3000);
$('#3').hide(3000);
}
if(id == 3) {
$(id).show(3000);
$('#1').hide(3000);
$('#2').hide(3000);
}
});
});
P.s.: I know that it is incorrect to start id's names with a number ;)

Really, no need for if...else logic here, nor any need to specify the first id - just use :first:
$('.hide_banner').not(':first').hide(3000);
$('a').click(function() {
var id = $(this).attr('href');
$(id).show(3000);
$('.hide_banner').not(id).hide(3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hide_banner" id="1">1</div>
<div class="hide_banner" id="2">2</div>
<div class="hide_banner" id="3">3</div>
<ul class="dropdown-menu" role="menu">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>

You already know how to use jQuery not, so use it to exclude the selected target:
JSFiddle: http://jsfiddle.net/vk94mmv2/2/
$(document).ready(function () {
$('.hide_banner:not(:first)').hide(3000);
$('a').click(function () {
var id = $(this).attr('href');
var $show = $(id);
$show.show(3000);
$('.hide_banner').not($show).hide(3000);
});
});
Note: you can change the first selector to use the :not(:first) pseudo selectors to select all but the first banner.

Need to add Prev/Next toggles to tab script

Here is the JS Fiddle of my existing tab build:
http://jsfiddle.net/getpresto/89ZAG/1/
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
What I need is the ability to add a far left button that will cycle the user to the next tab to the left and a far right button that will cycle the user to the right tab. If the user reaches either end and continues to click the same prev or next option then they will simply continue through to the other end of tabs. So if they are on tab 1 and click the left navigation button then they will go to tab 3 as an example.
How can I adjust this script to include this feature? Thank you for your time.

Basic steps for any version will be:
You need to get the current selected tab index,
alter it with +1 or -1 (depending on the button pressed),
then wrap the value based on the number of tabs,
then update the current tab.
If you can upgrade to JS 1.9.1 or higher something like this will work:
JSFiddle: http://jsfiddle.net/89ZAG/8/
$(document).ready(function () {
var selectTab = function (delta) {
//var index = $("#tabs .current").parent().index();
var index = $("#tabs").tabs('option', 'active');
var count = $("#tabs ul > li").length;
index += delta;
if (index < 0) {
index = count - 1;
}
if (index >= count) {
index = 0;
}
$('#tabs').tabs('option', 'active', index);
};
$("#tabs").tabs();
$('#prev').click(function () {
selectTab(-1);
});
$('#next').click(function () {
selectTab(1);
});
}); //end document ready
But the HTML also needs to be restructured to suit that later tabs requirements (the panel selectors are in the link href properties:
HTML:
<div id="tabs">
<ul class="tabs header">
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div class="panes" id="tab1">
<!--Start Tab 1-->Tab 1 content.</div>
<div class="panes" id="tab2">
<!--End Tab 1 & Start Tab 2-->Tab 2 content.</div>
<div class="panes" id="tab3">
<!--End Tab 2 & Start Tab 3-->Tab 3 content.</div>
<!--End Tab 3-->
<!--End Panes-->
</div>
<input class="header" type="button" value="Prev" id="prev" />
<input class="header" type="button" value="Next" id="next" />
You will need to style the two buttons so they appear beside/over your tabs.

AJAX in Bootstrap dropdown not working

I am currently trying to use AJAX to dynamically load html pages with the click of a Bootstrap dropdown, but it doesn't seem to work. Any ideas?
<ul class="dropdown-menu">
<li><a onclick = "$('#ajax').load('index.html');" href = "#">Project 1</a></li>
<li>Project 2</li>
<li>Project 3</li>
<li class="divider"></li>
</ul>
and then later I create the div for the ajax to load in.
<div class = "container">
<div class = "demo-row">
<div class = "col-xs-8" id="ajax">
</div>
Finally, the AJAX itself (on a separate file).
function loadAjax(file)
{
$(document).ready(function()
{
//Target the div with id of result
//and load the content from the specified url
//and the specified div element into it:
var fileName = new String(file);
var ending = " #ajax > *";
fileName = fileName.concat(ending);
$('#ajax').load(fileName);
});
}