We Keep Coding

jQuery find span that has class and hide div a few parents up

I am trying to locate this span with a certain class and then work up finding closest div with another specified class and hide it. Perhaps I'm missing something?
Can anyone see why?
$(document).ready(function() {
if ($('.ty-product-detail .product-left .stock-wrap span').hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="ty-product-block__wrapper clearfix">
<div class="ty-product-block__img-wrapper">
<div class="ty-product-block__img cm-reload-487" id="product_images_487_update">
<div class="ty-product-img cm-preview-wrapper">
<a id="det_img_link_48756b03bbdd708a_2203" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer cm-previewer ty-previewer" data-ca-image-width="550" data-ca-image-height="330" href="http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457""
style="-webkit-user-select: none;"><span class="ty-previewer__icon hidden-phone"></span>
</a>
<a id="det_img_link_48756b03bbdd708a_1806" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer hidden cm-previewer ty-previewer" data-ca-image-width="400" data-ca-image-height="271" href="http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425""><span class="ty-previewer__icon hidden-phone"></span>
</a>
</div>
<div class="ty-product-thumbnails ty-center cm-image-gallery" id="images_preview_48756b03bbdd708a" style="width: 280px;">
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_2203" class="cm-thumbnails-mini active ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="">
</a>
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_1806" class="cm-thumbnails-mini ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="">
</a>
</div>
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!--product_images_487_update-->
</div>
</div>
<div class="ty-product-block__left">
<form action="http://beanbags.ambientlounge.com/" method="post" name="product_form_487" enctype="multipart/form-data" class="cm-disable-empty-files cm-ajax cm-ajax-full-render cm-ajax-status-middle cm-processed-form">
<input type="hidden" name="result_ids" value="cart_status*,wish_list*,checkout*,account_info*">
<input type="hidden" name="redirect_url" value="index.php?dispatch=products.view&product_id=487">
<input type="hidden" name="product_data[487][product_id]" value="487">
<h1 class="ty-product-block-title">Zen Lounger - Sakura Pink</h1>
<div class="ty-product-block__sku">
<div class="ty-control-group ty-sku-item cm-reload-487" id="sku_update_487">
<input type="hidden" name="appearance[show_sku]" value="1">
<label class="ty-control-group__label" id="sku_487">CODE:</label>
<span class="ty-control-group__item" id="product_code_487">5528</span>
<!--sku_update_487-->
</div>
</div>
<hr class="clear">
<div class="product-left">
<div class="prices-container price-wrap">
<div class="ty-product-prices">
<span class="cm-reload-487" id="old_price_update_487">
<!--old_price_update_487--></span>
<div class="ty-product-block__price-actual">
<span class="cm-reload-487 ty-price-update" id="price_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_price]" value="1">
<span class="ty-price" id="line_discounted_price_487"><span class="ty-price-num">$</span><span id="sec_discounted_price_487" class="ty-price-num">149.00</span></span>
<!--price_update_487-->
</span>
</div>
<span class="cm-reload-487" id="line_discount_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_list_discount]" value="1">
<!--line_discount_update_487--></span>
</div>
</div>
<div class="ty-product-block__option">
<div class="cm-reload-487" id="product_options_update_487">
<input type="hidden" name="appearance[show_product_options]" value="1">
<input type="hidden" name="appearance[details_page]" value="1">
<input type="hidden" name="additional_info[info_type]" value="D">
<input type="hidden" name="additional_info[get_icon]" value="1">
<input type="hidden" name="additional_info[get_detailed]" value="1">
<input type="hidden" name="additional_info[get_additional]" value="">
<input type="hidden" name="additional_info[get_options]" value="1">
<input type="hidden" name="additional_info[get_discounts]" value="1">
<input type="hidden" name="additional_info[get_features]" value="">
<input type="hidden" name="additional_info[get_extra]" value="">
<input type="hidden" name="additional_info[get_taxed_prices]" value="1">
<input type="hidden" name="additional_info[get_for_one_product]" value="1">
<input type="hidden" name="additional_info[detailed_params]" value="1">
<input type="hidden" name="additional_info[features_display_on]" value="C">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li class="hidden">
<input type="hidden" name="product_data[487][product_options][365]" value="731" id="option_487_365">
</li>
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
<li>
<label id="option_description_487_365_732" class="ty-product-options__box option-items with-filling">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="732" onclick="fn_change_options('487', '487', '365');">
</label>
</li>
</ul>
</div>
</div>
<!-- Inline script moved to the bottom of the page -->
<!--product_options_update_487-->
</div>
</div>
<div class="ty-product-block__advanced-option">
<div class="cm-reload-487" id="advanced_options_update_487">
<!--advanced_options_update_487-->
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
<div class="cm-reload-487" id="qty_update_487">
<input type="hidden" name="appearance[show_qty]" value="">
<input type="hidden" name="appearance[capture_options_vs_qty]" value="">
<input type="hidden" name="product_data[487][amount]" value="1">
<!--qty_update_487-->
</div>
<div class="ty-product-block__button">
<div class="cm-reload-487 " id="add_to_cart_update_487">
<input type="hidden" name="appearance[show_add_to_cart]" value="1">
<input type="hidden" name="appearance[show_list_buttons]" value="1">
<input type="hidden" name="appearance[but_role]" value="big">
<input type="hidden" name="appearance[quick_view]" value="">
<div class="ty-control-group">
<label for="sw_product_notify_487" class="ty-strong">
<input id="sw_product_notify_487" type="checkbox" class="checkbox cm-switch-availability cm-switch-visibility" name="product_notify" onclick="if (!this.checked) {Tygh.$.ceAjax('request', 'http://beanbags.ambientlounge.com/index.php?dispatch=products.product_notifications&enable=' + 'N&product_id=487&email=' + $('#product_notify_email_487').get(0).value, {cache: false});}">Notify me when this product is back in stock</label>
</div>
<div class="ty-control-group ty-input-append ty-product-notify-email hidden" id="product_notify_487">
<input type="hidden" name="enable" value="Y">
<input type="hidden" name="product_id" value="487">
<label id="product_notify_email_label" for="product_notify_email_487" class="cm-required cm-email hidden">Email</label>
<input type="text" name="hint_email" id="product_notify_email_487" size="20" value="Enter e-mail address" class="ty-product-notify-email__input cm-hint" title="Enter e-mail address">
<button class="ty-btn-go cm-ajax" type="submit" name="dispatch[products.product_notifications]" title="Go"><i class="ty-btn-go__icon ty-icon-right-dir"></i>
</button>
</div>
<!--add_to_cart_update_487-->
</div>
</div>
</div>
<p class="clear filled-msg cover-only">* If you don't choose to add filling you will receive the cover only.</p>
<p class="clear filled-msg filled">* Comes pre-filled with microbeads</p>
</div>
<div class="product-right">
<div class="ty-product-block__note">
<p style="text-align: center;">
<img src="http://www.beanbags.com.au/images/ambient-lounge.jpg">
</p>
</div>
</div>
</form>
<div class="clear"></div>
<!-- Inline script moved to the bottom of the page -->
<div class="ty-tabs cm-j-tabs clearfix">
<ul class="ty-tabs__list">
<li id="description" class="ty-tabs__item cm-js active"><a class="ty-tabs__a">Description</a>
</li>
<li id="product_tab_11" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Colour</a>
</li>
<li id="product_tab_10" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Fabric</a>
</li>
<li id="features" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Features</a>
</li>
</ul>
</div>
<div class="cm-tabs-content ty-tabs__content clearfix" id="tabs_content">
<div id="content_description" class="ty-wysiwyg-content content-description" style="display: block;">
<div>
<h2>Ambient Lounge Zen Lounger - Sakura Pink</h2>
<p>
Dive onto the big pink pad and it will hug your body with all the love and warmth of a big squishy teddy bear. You will fall in love with this super-soft square cushioned bean bag becasue of the difference in fabric and tactility. Quite simply, we use
premuim open weave fabrics that make you want to hug your Zen close to your skin on a cold winter's night. The design of the Zen is just so flexible and versatile - it doesnt take up lots of space in the house but yet you can sprawl out
full body to study or sit up straight to watch the TV. The natural colour scheme means it can go just about anywhere and look good. Use it as your reliable crashmat after a long day on your feet.
</p>
<p>1 bag of 300lt is enough <u>Bean Filling</u> for the luxurious Conversion Lounger (290lt needed).</p>
</div>
</div>
<div id="content_product_tab_11" class="ty-wysiwyg-content content-product_tab_11" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Make your living room or playroom pop with this precious pink plus-size luxury lounger. Children love this friendly fresh color while adults love that it also carries a deep sense of sophistication. Our world-class designers chose this decadent pink because
of its versatility and ability to sit well in many types of interior settings.
</p>
</div>
</div>
<div id="content_product_tab_10" class="ty-wysiwyg-content content-product_tab_10" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Extremely soft and tactile on the surface and backed with TC to give it extra strength and body for hard wear and form. Super thick sofa weave to give you a lush seating experience.
</p>
<p>
40％ viscose, 60% polyester, 560g/m.
</p>
</div>
</div>
<div id="content_product_tab_9" class="ty-wysiwyg-content content-product_tab_9">
</div>
<div id="content_features" class="ty-wysiwyg-content content-features" style="display: none;">
<div class="ty-product-feature">
<span class="ty-product-feature__label">Manufacture:</span>
<div class="ty-product-feature__value">Ambient Lounge</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Style:</span>
<div class="ty-product-feature__value">Zen Lounger</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Type:</span>
<div class="ty-product-feature__value">Interiors</div>
</div>
</div>
<div id="content_discussion" class="ty-wysiwyg-content content-discussion">
</div>
</div>
</div>
</div>
</div>

If you have more than one span elements for this, then you can use each loop through it like below:
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});

Managed to work out the solution with the help of "Parixit" Answer it got me in the right direction, i cleaned up the HTML so others can see the Answer better.
$(document).ready(function() {
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$('.ty-product-detail').find('.ty-product-options').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="product-left">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
</ul>
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
</div>
</div>
</div>

Closing Dynamically created DIV

So I have a section to add a color and I got it to dynamically create a copy of the div with a new ID for each dynamic div.
The problem is that once the div is created, I don't know how to close it (i.e. remove it from DOM via a "close" action). I know it's because it's dynamic content. You cant bind event likes the static content, it's will not bind to the elements because they don't appear at the time you bind. I just don't know how to go about getting it to close.
The div I want to close starts with "Color" + incremented number. I hope I explained this correctly and any help would be appreciated. Thanks.
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
Here's the link to the working example:
jsfiddle

Sure, see this updated fiddle;
Essentially you want to bind an event to the document using .on(), like:
$(document).on('click', '.remove', function(e){
$(this).closest('.color-wap').remove();
});
I added the .color-wrap class to the #color div to avoid working with duplicated ID's via cloning, and added the .remove class to the remove button

1)Use the .on() to bind events on dynamically created elements
2)jquery selector ^ can help in selecting the div with id of color-number.
3).animate() to toggle height of the div or .remove if you want to completly remove the element.
$(function() {
var count = 0;
$('#addcolor').click(function() {
count++;
var clonediv = $('#color');
$(clonediv).clone().insertBefore('#color');
$(clonediv).attr("id", "color" + count);
});
$(document).on("click", ".glyphicon-remove-sign", function() {
$(this).closest("div[id^='color']").animate({"height":"toggle"});
//$(this).closest("div[id^='color']").remove();
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12" id="test">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>

Javascript : how to know which tab is active

In my code i am using six tabs now i want to know which tab is active .one more thing is that each tab call the same function on clicking and i want to check activation tab(either tab1,tab2 ..) on button click which call other function and in that function i want to check active tab below i explain my problem with code
If i say my problem in one line that want to know active tab on clicking button which call javascript function ,function not on tab clicking*
here i m not putting all code of pages but only require code ,Hope you understand my problems and i provide needed code
Thanks in advance
Add.jsp
This is the page on which i am using tabs
<form action="AddInspServlet" method="Post" enctype="multipart/form-data"> <div>
<div id="slider">
<div class="form-step" >
<div class="row">
<div class="form-left">container Number *</div>
<div class="form-right"><input type="text" id="fname" name="contno" class="form-input" onblur="sending(this.value)"/></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Container type *</div>
<div class="form-right"><input type="text" id="lname" name="conttype" disabled="disabled" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Inspection type *</div>
<div class="form-right">
<select id="gender" name="insptype">
<option value="0">Select</option>
<option value="Gate In">Gate In</option>
<option value="Gate Out">Gte Out</option>
</select>
</div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Place</div>
<div class="form-right"><input type="text" id="places" name="places" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
<div class="form-step" >
<div class="form-left1">
<div class="container1">
<ul class="tabs">
<li>Left</li>
<li>Right</li>
<li>Top</li>
<li>Bottom</li>
<li>Front</li>
<li>Rear</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div id="hidendiv"></div>
<h2>Left Side</h2>
<div id="leftside">
</div>
<input type="file" name="img1" id="img1" onchange="return ValidateFileUpload('img1')" />
</div>
<div id="tab2" class="tab_content">
<h2>Right Side</h2>
<div id="rightside">
</div>
<input type="file" name="img2" id="img2" onchange="return ValidateFileUpload('img2')" />
</div>
<div id="tab3" class="tab_content">
<h2>Top Side</h2>
<div id="topside">
</div>
<input type="file" name="img3" id="img3" onchange="return ValidateFileUpload('img3')" />
</div>
<div id="tab4" class="tab_content">
<h2>Bottom Side</h2>
<div id="bottomside">
</div>
<input type="file" name="img4" id="img4" onchange="return ValidateFileUpload('img4')" />
</div>
<div id="tab5" class="tab_content">
<h2>Front Side</h2>
<div id="frontside">
</div>
<input type="file" name="img5" id="img5" onchange="return ValidateFileUpload('img5')" />
</div>
<div id="tab6" class="tab_content">
<h2>Rear Side</h2>
<div id="rearside">
</div>
<input type="file" name="img6" id="img6" onchange="return ValidateFileUpload('img6')" />
</div>
</div>
</div>
</div>
<div class="form-right1">
<img src="images/noimg.jpg" height="288px" width="400px" id="blah">
</div>
<div style=" width: 200px; margin-top:225px; margin-left:300px">Remarks: <input type="text" width="100px" name="remark"/></div>
</div>
</div>
</div>
<div class= "ash" style="width:auto; margin-left:35%; float: left;">
<input type="submit" name="btn" id="submit" value="AddInspection" onclick="im()" />
<input type="submit" name="btn" value="Cancel"/>
</div>
</form>
JAVA Script function:
This is the function on which i want to know which tab is active that is defined in above jsp
<script type="text/javascript">
function im()
{
/*alert("calling im function");
var tabname = document.getElementById("tab1");
if(tabname){
alert("tab1 is active");
}else{
alert("tab 1 is not active");
}*/
if($('#img1').val()=="" || $('#img2').val()=="" || $('#img3').val()=="" || $('#img4').val()=="" || $('#img5').val()=="" || $('#img6').val()=="")
{
alert("Please select image");
$('#submit').prop('disabled',true);
}
else
{
$('#submit').prop('disabled',false);
}
}

Try like
$('.tab').click(function(){
var a=$(this).attr('id');
$('#sample').html('Active Tab is'+a);
});
Fiddle

you can assign same class to all tab and bind the click function in document ready, you will get the current object by 'this'.
$('.tab').click(function(){
$(this).val();
});

$('.tab').click(function(){
var x=$(this).prop('id');
$('#lbl').html('Active Tab'+ x);
});

I'm new here but you could add a worthless class to the active tab on click, then on the button click retrieve the id or whatever you want.
jQuery
//edit: added function to add and remove class, replaced text to illustrate
$(function () {
$('.tab_content').click(function () {
$('.tab_content').removeClass('active').text('');
$(this).addClass('active').text('am active');
})
$('#button').click(function () {
$('.tab_content').each(function () {
if ($(this).hasClass('active')) {
alert($(this).attr('id')+" is the active tab");
alert($(this).text()+" is the text");
}
});
});
});
html
<div id='1' class='tab_content'>not</div>
<div id='2' class='tab_content active'>am active</div>
<div id='3' class='tab_content'>not</div>
<div id='4' class='tab_content'>not</div>
<button id='button' style='width:50px; height:50px;'>Click</button>
Here is a working fiddle: http://jsfiddle.net/Lv5VJ/2/
I'm sure there are better ways but hey, I'm trying haha.

jQuery .closest returns undefined

I've got the code below which works fine, however the jquery to add the items doesnt find the data-parent-room value and just returns undefined. This is the only thing not working :(
HTML:
<div id="inventoryRooms">
<!--BOX SHART-->
<div class="widget box formHolder" data-parent-room="1">
<!--ROOM NAME-->
<form class="widget-header rooms">
<input type="text" placeholder="Type Room name" name="roomName[]" class="form-input add-room-input input-width-xxlarge">
<input type="hidden" class="roomId" name="roomId[]">
<input type="hidden" class="inventoryId" name="inventoryId[]" value="<?=$_GET['inventory_id']?>">
<div class="toolbar no-padding">
<div class="btn-group">
<span class="btn saveRoom"><i class="icon-ok"></i> Save Room</span>
</div>
</div>
</form>
<!--/END-->
<!--GENERIC ROW TITLES-->
<div class="widget-header header-margin hide">
<div class="row row-title">
<div class="col-md-3"><h5>ITEM</h5></div>
<div class="col-md-3"><h5>DESCRIPTION</h5></div>
<div class="col-md-3"><h5>CONDITION</h5></div>
<div class="col-md-2"><h5>PHOTOGRAPH</h5></div>
<div class="col-md-1 align-center"><h5><i class="icon-cog"> </i></h5></div>
</div>
</div>
<!--/END-->
<!--ADD ITEM-->
<div class="items">
</div>
<!--/END-->
<div class="toolbar-small">
<div class="btn-group">
<span class="btn addItem"><i class="icon-plus"></i> Add Item</span>
<span data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-gear"></i> Options<span class="button-space"></span><i class="icon-angle-down"></i></span>
<ul class="dropdown-menu pull-right">
<li><i class="icon-trash"></i> Delete Room</li>
</ul>
</div>
</div>
</div>
</div>
jQuery:
$(document).on('click','.addItem', function(){
$('<!--ROW START-->\
<form class="widget-content item">\
<div class="row">\
<div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<input type="hidden" class="itemId" name="itemId[]" value="">\
<input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
<input type="hidden" name="itemParent[]" value="'+$(this).closest().attr('data-parent-room')+'">\
<div class="col-md-2">\
<div class="fileinput-holder input-group">\
<input id="fileupload" type="file" name="files[]" data-url="uploads/">\
</div>\
</div>\
<div class="col-md-1 align-center"><i class="save icon-ok large"> </i> <i class="delete icon-trash large"> </i></div>\
</div>\
</form>\
<!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
$(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
});
Like i say, it all works fine apart from that damn data-parent-room value. Any help is appreciated! using jQuery 1.10.1

You need to pass a selector to closest
//since the attribute data-parent-room is for the `formHolder` element
$(this).closest('.formHolder').att('data-parent-room')
or
//find the closest element with attribute data-parent-room
$(this).closest('[data-parent-room]').att('data-parent-room')
instead of using .att('data-parent-room'), you can use .data('parentRoom') also

You need to tell what closest parent you want in selector. Pass the class you have with div having attribute data-parent-room
$(this).closest('.widget.box.formHolder').attr('data-parent-room')
It would be better if you use data() instead of attr for addressing data
$(this).closest('.widget.box.formHolder').data('parent-room')

$(this).closest('[data-parent-room]').data('parent-room');

leanModel ajax call

Hi how i can render a different form using leanModel dialog box? Currently this is how the lean model works:
<a id="go" rel="privateMsg" name="signup" href="#signup">With Close Button</a>
<div id="signup" style="display: none; position: relative; opacity: 1; z-index: 11000; left: 50%; margin-left: -202px; top: 200px;">
<div id="signup-ct">
<div id="signup-header">
<h2>Create a new account</h2>
<p>It's simple, and free.</p>
<a class="modal_close" href="#"></a>
</div>
<form action="">
<div class="txt-fld">
<label for="">Username</label>
<input id="" class="" name="" type="text">
</div>
<div class="txt-fld">
<label for="">Email address</label>
<input id="" name="" type="text">
</div>
<div class="txt-fld">
<label for="">Password</label>
<input id="" name="" type="text">
</div>
<div class="btn-fld">
Cancel
<button type="submit">Sign Up</button>
</div>
</form>
</div>
</div>
$(function() {
$('a[rel*=privateMsg]').leanModal({ top : 100, closeButton: ".modal_close,.close" });
});
The leanModel js is as follows :
(function($){
$.fn.extend({
leanModal:function(options){
var defaults={top:100,overlay:0.5,closeButton:null};
var overlay=$("<div id='lean_overlay'></div>");
$("body").append(overlay);
options=$.extend(defaults,options);
return this.each(function(){
var o=options;
$(this).click(function(e){
var modal_id=$(this).attr("href");
$("#lean_overlay").click(function(){
close_modal(modal_id)
});
$(o.closeButton).click(function(){
close_modal(modal_id);
});
var modal_height=$(modal_id).outerHeight();
var modal_width=$(modal_id).outerWidth();
$("#lean_overlay").css({"display":"block",opacity:0});
$("#lean_overlay").fadeTo(200,o.overlay);
$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":"100px"});
$(modal_id).fadeTo(200,1);e.preventDefault()
});
});
function close_modal(modal_id){
$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})
}
}
});
})(jQuery);
How i can improve this code so that i can open a dialog box just for any form? Also if i would like to load signup div from ajax how can i do so? Thanks