Develop Reference

Get text content from nested list item class javascript

Screenshot with explanation
My shopify store has currency pop out menu that can be opened via an icon button ($).
It would be ideal to display the currency that is selected to the right hand side of the icon button.
The menu is an unordered list and the selected list item is assigned the class "active". The actual text content is wrapped inside a nested "a href:"
I added a <p> with the id "currName" to the right hand side of the icon button and have attempted to show the selected list item in this spot.
HTML:
<div class="tt-desctop-parent-multi tt-parent-box">
<div class="tt-multi-obj tt-dropdown-obj">
<div class="row">
<button class="tt-dropdown-toggle"
data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
data-tposition="bottom">
<i class="icon-e-49"></i><p id="currName"> </p> </button></div>
<div class="tt-dropdown-menu">
<div class="tt-mobile-add">
<button class="tt-close">Close</button>
</div>
<div class="tt-dropdown-menu" style="display: block;">
<div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>
<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
<a href="#">
$ Australian Dollar
</a>
</li><li data-currency="USD" class="active">
<a href="#">
$ United States Dollar
</a>
</li></ul></form></div>
</div><br><br>
My code:
<script>
let selectedCurrency = document.querySelectorAll("li, .currency-selector, .active, a[href^='#']").innerHTML;
document.getElementById('currName').innerHTML = selectedCurrency;
</script>
The result is undefined no matter which method I try.
Thanks :)

You need to simply replace document.querySelectorAll with document.querySelector
This will give you an output like this:
https://jsfiddle.net/hdro85k1/
The code will look like this then:
let selectedCurrency = document.querySelector("li, .currency-selector, .active, a[href^='#']").innerHTML;
document.getElementById('currName').innerHTML = selectedCurrency;
<div class="tt-desctop-parent-multi tt-parent-box">
<div class="tt-multi-obj tt-dropdown-obj">
<div class="row">
<button class="tt-dropdown-toggle"
data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
data-tposition="bottom">
<i class="icon-e-49"></i><p id="currName"> </p> </button></div>
<div class="tt-dropdown-menu">
<div class="tt-mobile-add">
<button class="tt-close">Close</button>
</div>
<div class="tt-dropdown-menu" style="display: block;">
<div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>
<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
<a href="#">
$ Australian Dollar
</a>
</li><li data-currency="USD" class="active">
<a href="#">
$ United States Dollar
</a>
</li></ul></form></div>
</div><br><br>

You should use the select tag instead of a list.
Example:
const currencySelector = document.getElementById("currency-selector");
currencySelector.addEventListener("change", (e) => {
console.log(e.target.value)
})
<select name="currency" id="currency-selector">
<option value="USD">Dollar</option>
<option value="EUR">Euro</option>
</select>

Remove value from an input using jquery after add on click

I want to remove value that I stored after onclcik in an input type. Now I want to remove value onclick. I using checkbox to add value with condition if box is unchecked that add value. Now I want to remove the matched value from input onclick in checked condition, if a.
HTML
<ul class="Popular" id="Popular">
<li class="item odd" onclick="handleClick(334);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-334" class="checkbox related-checkbox" name="related_products[]" value="334">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/g/r/greeting.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> 10 Handmade chocolates</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">249.0000</span></span>
</div>
</div>
</div>
</li>
<li class="item odd" onclick="handleClick(338);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-338" class="checkbox related-checkbox" name="related_products[]" value="338">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/w/h/white-teddy-6inch-addon.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> Small Teddy Bear (6")</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">279.0000</span></span>
</div>
</div>
</div>
</li>
<li class="item odd" onclick="handleClick(339);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-339" class="checkbox related-checkbox" name="related_products[]" value="339">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/5/-/5-dairy-milk.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> 5 Dairy milk 13 gms each</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">200.0000</span></span>
</div>
</div>
</div>
</li>
<li class="item odd" onclick="handleClick(340);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-340" class="checkbox related-checkbox" name="related_products[]" value="340">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/h/a/half-kg-kajukatli.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> Half kg Kaju Katli</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">200.0000</span></span>
</div>
</div>
</div>
</li>
<li class="item odd" onclick="handleClick(341);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-341" class="checkbox related-checkbox" name="related_products[]" value="341">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/a/d/ad007_large_teddy_bear_gift_to_india.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> Large Teddy Bear (12")</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">200.0000</span></span>
</div>
</div>
</div>
</li>
</ul>
Javascript
var numArray = [];
function handleClick(cb) {
if (jQuery('related-products-field')) {
if (jQuery('related-products-field')) {
var checkbox = jQuery('#related-checkbox-' + cb);
// The is(':checked') function checks if the checkbox is checked
var isChecked = checkbox.is(':checked');
if (isChecked) {
I want remove code here
}
}
if (!isChecked) {
numArray.push(cb);
//alert(numArray);
//var allele = document.getElementById("dialog").innerHTML = numArray;
document.getElementById('related-products-field').value = numArray.join(",");
}
//alert("xcccc");
checkbox.prop('checked', !isChecked);
// do the rest of the function
}
}
// }
}
value save in input on click
<input type="hidden" name="related_product" id="related-products-field" value="338,339,340">

if (isChecked) {
var index = numArray.indexOf(cb); //to get index of your item in numArray
if (index > -1) {
numArray.splice(index, 1); //removes item from array
}
document.getElementById('related-products-field').value = numArray.join(",")
}
javascript have splice() function to remove item from array.
jsfiddle for reference: jsfiddle demo

How to get specific HTML or text in website in C#

So I have this HTML website that has code like this:
<ul class="WCVH WKVH" role="list">
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.POSTED_DATE--uid6-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.POSTED_DATE--uid6">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="b7e15031a749444a855366b1f1a87a46" data-automation-id="menuItem" aria-label="Posted Today, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WKQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="POSTED_DATE_charm" alt="" aria-label=""
aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Posted Today" aria-label="Posted Today" data-automation-label="Posted Today" aria-labelledby="labeledImage.POSTED_DATE--uid6-formLabel">Posted Today</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_TYPE--uid7-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_TYPE--uid7">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="5c6eda594d0d46609fa4c8e2ff13e731" data-automation-id="menuItem" aria-label="Full time, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WCQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_TYPE_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Full time" aria-label="Full time" data-automation-label="Full time" aria-labelledby="labeledImage.JOB_TYPE--uid7-formLabel">Full time</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_REQ--uid8-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_REQ--uid8">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="cc054d6cca664a3282855669711520d5" data-automation-id="menuItem" aria-label="T_R_1616417, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WBQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_REQ_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="T_R_1616417" aria-label="T_R_1616417" data-automation-label="T_R_1616417" aria-labelledby="labeledImage.JOB_REQ--uid8-formLabel">T_R_1616417</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I need to get the specific Requisition ID: T_R_1616417 but I got error that they cannot find the ID in the div element tag.
Error Code
`An unhandled exception of type 'WatiN.Core.Exceptions.ElementNotFoundException' occurred in WatiN.Core.dll
Additional information: Could not find DIV element tag matching criteria: Attribute 'id' equals 'labeledImage.JOB_REQ--uid8' at https://hpe.wd5.myworkdayjobs.com/en-US/Jobsathpe/job/BEP01---Embassy-Prime-BEP01/AMS-Profiling-Data-Specialist_1000713
`
Here's my code in C# in grabbing the specific item:
reqID = browser.Div(Find.ById("labeledImage.JOB_REQ--uid8")).OuterText.ToString();
How can i get the correct value "T_R_1616417" in this line of html code in C# format?

How to remove option from auto completion select list using jQuery

I want to remove the option from the auto completion input drop down select list.
Unable to get the option value until unless i click on input drop down list. Once I click on the input field the options are auto populating, But i dont know how to get the option here.
The input field before click on it:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1"></div>
<span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
After click on input field:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select" data-query="">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="ajs-layer-placeholder">
<div class="ajs-layer box-shadow" style="width: 248px; position: fixed; left: 153.667px; top: 399.167px; max-height: 171.833px; display: none;">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1" style="display: block;">
<div class="aui-list-scroll" tabindex="-1">
<h5>Project role</h5>
<ul class="aui-list-section aui-last" id="project-role">
<li class="aui-list-item aui-list-item-li-administrators active">
<a class="aui-list-item-link" href="#" title="Administrators">Administrators</a>
</li>
<li class="aui-list-item aui-list-item-li-developers">
<a class="aui-list-item-link" href="#" title="Developers">Developers</a>
</li>
<li class="aui-list-item aui-list-item-li-event-watchers">
<a class="aui-list-item-link" href="#" title="Event Watchers">Event Watchers</a>
</li>
<li class="aui-list-item aui-list-item-li-privilege-users">
<a class="aui-list-item-link" href="#" title="Privilege Users">Privilege Users</a>
</li>
<li class="aui-list-item aui-list-item-li-users">
<a class="aui-list-item-link" href="#" title="Users">Users</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<span class="icon aui-ss-icon drop-menu noloading"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
Here I want to remove the "Users" option from the 'li' in the second code snippet. Please help me regarding this.

Try:
$('#aui-list-item-li-users').remove();
this code will remove the 'li' with the class = aui-list-item-li-users

jquery events and backbone

I am having issues with an events firing twice when clicked, what I am trying to open a div that is collapsable on the click of a link and then close again on a second click. The problem is that the link is one of many with the same class and the same functionality on the page. And what happens is the open event happens immediately followed by the close event,
I am not sure why this is happening, as I am identifying the clicked element using,
e.currentTarget();
but it seems to be getting confused as to what element is getting clicked.
Here is my code,
Open the div
itemTab: function(e) {
var clicked = $(e.currentTarget),
clickedTab = clicked.data("tab");
clicked.parent().parent().parent().find(".action-btn").css({
"width" : "0px",
"display" : "none"
});
clicked.parent().find("div.action-btn").show().animate({
"width" : "28px"
}, 250);
//clicked.closest(".item-tabs").find("li#active").attr("id", "");
clicked.closest(".item-tabs").find("li.active").removeClass("active");
clicked.closest(".items-tabs").find("li.active").removeClass("active");
clicked.parent().addClass("active").attr("id", "active");
clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
clicked.closest(".item-tabs").find("." + clickedTab).addClass("active");
clicked.closest(".item-tabs").find(".close").css("visibility", "visible");
e.preventDefault();
},
close the div
closeTab: function(e) {
var clicked = $(e.currentTarget).parent(),
clickedTab = clicked.data("tab");
clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function() {
clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
});
clicked.removeClass("active");
e.preventDefault();
},
The HTML
<article class="item">
<header class="active">
<h1>
<span class="expander"></span>
<span class="item_name editable">New Item</span>
<span class="js-complete-item complete-item ">=</span>
<span class="fileinputbar-button js-open-adder-form add-item-task">+</span>
<ul class="floating-menu">
<span class="tip"></span>
<li class="js-add-new-task add-new-task">Add Task</li>
<li class="js-add-new-item add-new-item">Add Item</li>
</ul>
<span class="tasks meta">
<span class="js-task-count">6 / 6 tasks</span>
<span class="js-completion-status"></span>
</span></h1>
<div class="inline-edit item" style="display: none;">
<form action="/projects/items/edit/71" method="post" accept-charset="utf-8" id="item_name" class="inline_edit edit_item_name" novalidate="novalidate">
<p>
<input type="text" name="item_name" value="New Item" class="item_name">
</p>
<p>
<input type="submit" name="submit" value="Update">
<a class="cancel" href="#">Cancel</a>
Delete
</p>
</form>
</div>
<div class="percentage_bar" title="0% Complete" style="background-color: #18fbc5; width: 0%;">0% Complete</div>
</header>
<div class="item_content" style="display: block;">
<div class="item-tabs">
<ul class="tab-links">
<li class="active" id="active"><div></div>Description<div></div></li>
<li class="" id="active"><div></div>Tasks<div></div><div class="action-btn js-add-tasks" style="width: 0px; display: none;"></div></li>
</ul>
<div class="tab-content description active">
<span class="item_description editable">
<p class="add-text js-add-item-description">
<span class="faded">No Description, Click to add</span>
</p>
</span>
<div class="inline-edit js-item-description-edit" style="display: none;">
<form action="/projects/items/edit_description/71" method="post" accept-charset="utf-8" id="item_description" class="inline_edit edit_item_description" novalidate="novalidate">
<p>
<textarea autofocus="" name="item_description" class="edit_item_description"></textarea>
<!--<input type="text" name="item_description" value="" class="edit_item_description"> -->
</p>
<p>
<input type="submit" name="submit" value="Update">
<a class="cancel" href="#">Cancel</a>
</p>
</form>
</div>
</div>
<div class="tab-content tasks"><article class="task-list">
<header>
<h1 class="tasks active">
<span class="js-task-header">Tasks</span>
<span class="fileinputbar-button js-open-task-adder-form list-header-add">+</span>
</h1>
</header>
<div class="tasks active">
<span class="toggle-header">
<div class="labels">
<ul>
<li>Active<i class="close-label"></i></li>
<li>Complete<i class="close-label"></i></li>
</ul>
</div>
<input id="user-search-query" type="text" name="task_search" value="" placeholder="Filter" class="required file-search">
</span><div class="new-task js-new-task" style="display: none;">
<form action="" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">
<p>
<textarea autofocus="" name="task_name" class="item task_name_edit js-task-adder-input" title="Add New Task (Press Enter to add)" placeholder="New task name..."></textarea>
<input type="submit" name="submit" value="Update" class="js-task-adder-input-submit">
<a class="cancel" href="#">Cancel</a>
<span class="instruction-task-add">Press Enter to add, or shift enter to add a new line</span>
</p>
</form>
</div>
<ol class="tasks active"><div name="dasdsadas" task_id="129" id="129" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-26T14:39:23+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">dasdsadas</span>
<form action="/tasks/edit/129" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">dasdsadas</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-26T14:39:23+01:00" title="2013-09-26T14:39:23+01:00">5 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
]
</span>
</div>
<div class="update">
active
</div>
</li>
</div><div name="sdasdas" task_id="127" id="127" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T16:26:07+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">sdasdas</span>
<form action="/tasks/edit/127" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">sdasdas</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-25T16:26:07+01:00" title="2013-09-25T16:26:07+01:00">6 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
]
</span>
</div>
<div class="update">
active
</div>
</li>
</div><div name="New Sub Item Task 2" task_id="124" id="124" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T09:43:00+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">New Sub Item Task 2</span>
<form action="/tasks/edit/124" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">New Sub Item Task 2</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-25T09:43:00+01:00" title="2013-09-25T09:43:00+01:00">6 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
]
</span>
</div>
<div class="update">
active
</div>
</li>
</div><div name="New Sub Item Task 1" task_id="123" id="123" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T09:42:48+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">New Sub Item Task 1</span>
<form action="/tasks/edit/123" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">New Sub Item Task 1</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-25T09:42:48+01:00" title="2013-09-25T09:42:48+01:00">6 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
]
</span>
</div>
<div class="update">
active
</div>
</li>
</div>
</ol>
</div>
</article></div>
</div>
<article class="item">
<header class="active">
<h1>
<span class="expander"></span>
<span class="item_name editable">New Item Sub Item</span>
<span class="js-complete-item complete-item ">=</span>
<span class="fileinputbar-button js-open-adder-form add-item-task">+</span>
<ul class="floating-menu">
<span class="tip"></span>
<li class="js-add-new-task add-new-task">Add Task</li>
</ul>
<span class="tasks meta">
<span class="js-task-count">2 / 2 tasks</span>
<span class="js-completion-status"></span>
</span></h1>
<div class="inline-edit item" style="display: none;">
<form action="/projects/items/edit/" method="post" accept-charset="utf-8" id="item_name" class="inline_edit edit_item_name" novalidate="novalidate">
<p>
<input type="text" name="item_name" value="New Item Sub Item" class="item_name">
</p>
<p>
<input type="submit" name="submit" value="Update">
<a class="cancel" href="#">Cancel</a>
Delete
</p>
</form>
</div>
<div class="percentage_bar" title="0% Complete" style="background-color: #18fbc5; width: 0%;">0% Complete</div>
</header>
<div class="item_content" style="display: block;">
<div class="item-tabs">
<ul class="tab-links">
<li class=""><div></div>Description<div></div></li>
<li class="active" id="active"><div></div>Tasks<div></div><div class="action-btn js-add-tasks" style="width: 28px; display: block;"></div></li>
</ul>
<div class="tab-content description">
<span class="item_description editable">
<p class="add-text js-add-item-description">
<span class="faded">No Description, Click to add</span>
</p>
</span>
<div class="inline-edit js-item-description-edit" style="display: none;">
<form action="/projects/items/edit_description/" method="post" accept-charset="utf-8" id="item_description" class="inline_edit edit_item_description" novalidate="novalidate">
<p>
<textarea autofocus="" name="item_description" class="edit_item_description"></textarea>
<!--<input type="text" name="item_description" value="" class="edit_item_description"> -->
</p>
<p>
<input type="submit" name="submit" value="Update">
<a class="cancel" href="#">Cancel</a>
</p>
</form>
</div>
</div>
<div class="tab-content tasks active"><article class="task-list">
<header>
<h1 class="tasks active">
<span class="js-task-header">Tasks</span>
<span class="fileinputbar-button js-open-task-adder-form list-header-add">+</span>
</h1>
</header>
<div class="tasks active">
<span class="toggle-header">
<div class="labels">
<ul>
<li>Active<i class="close-label"></i></li>
<li>Complete<i class="close-label"></i></li>
</ul>
</div>
<input id="user-search-query" type="text" name="task_search" value="" placeholder="Filter" class="required file-search">
</span><div class="new-task js-new-task" style="display: none;">
<form action="" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">
<p>
<textarea autofocus="" name="task_name" class="item task_name_edit js-task-adder-input" title="Add New Task (Press Enter to add)" placeholder="New task name..."></textarea>
<input type="submit" name="submit" value="Update" class="js-task-adder-input-submit">
<a class="cancel" href="#">Cancel</a>
<span class="instruction-task-add">Press Enter to add, or shift enter to add a new line</span>
</p>
</form>
</div>
<ol class="tasks active"><div id="130" name="A new task!" task_id="130" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-26T14:40:17+01:00" completion_date="1999-11-30T01:00:00+00:00" stage="New Item Sub Item" stage_id="74" completed="active" parent_id="74" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">A new task!</span>
<form action="/tasks/edit/130" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">A new task!</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-26T14:40:17+01:00" title="2013-09-26T14:40:17+01:00">5 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
/ <span class="stage"> New Item Sub Item</span> ]
</span>
</div>
<div class="update">
active
</div>
</li>
</div><div id="128" name="Boom!" task_id="128" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T17:18:49+01:00" completion_date="1999-11-30T01:00:00+00:00" stage="New Item Sub Item" stage_id="74" completed="active" parent_id="74" parent_type="item" project_id="12">
<li class="">
<h5><span class="task_name editable">Boom!</span>
<form action="/tasks/edit/128" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> <p>
<textarea name="task_name" class="task_name_edit">Boom!</textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
delete </p>
</form>
<div style="clear:both"></div>
</h5>
<div class="meta">
<span>Created by Me <time datetime="2013-09-25T17:18:49+01:00" title="2013-09-25T17:18:49+01:00">6 days ago</time>
</span>
<span class="path">
[ <span class="item">New Item</span>
/ <span class="stage"> New Item Sub Item</span> ]
</span>
</div>
<div class="update">
active
</div>
</li>
</div>
</ol>
</div>
</article></div>
</div>
</div><!-- item_content:end -->
</article></div><!-- item_content:end -->
</article>
The Events
events : {
"click .item-tabs li:not(.active) a": "itemTab",
"click .item-tabs li.active": "closeTab",
}
Is there are reason why the event is running the open and close event straight after one another?

Try this to find out which element is clicked:
console.log($(e.currentTarget));
console.log($(e.target));
This should output clicked HTML element to the console.

Check isDefaultPrevented before executing you code might solve your problem for Example:
closeTab: function(e) {
if(!e.isDefaultPrevented()) { // Add this condition to both functions
var clicked = $(e.currentTarget).parent(),
clickedTab = clicked.data("tab");
clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function() {
clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
});
clicked.removeClass("active");
e.preventDefault();
}
},