We Keep Coding

Get parent div id by clicking on a child element

What I'm looking to do is remove the parenting div by ID after the button is clicked, to avoid closing all divs with the same class. In my actual code, the user is able to append multiple divs to the screen on button click, and each is assigned it's own ID. Each has a boostrap button up top that should close the parent div only instead of having to create 12 separate functions (the limit of div placement for the user).
HTML
<div class='some classes' id='box1'>
<span class='btn btn-primary'>Close this div</span>
</div>
<div class='some classes' id='box2'>
<span class='btn btn-primary'>Close this div</span>
</div>
CSS
#box {
width:200px;
height:200px;
background:black;
}
JS
$(document).ready(function(){
$('.btn').on('click',function(){
var getParentID = $('.btn').parent().attr('id');
$(getParentID).remove();
});
});
This is essentially all I was working with to try to get it to function. Any help is much appreciated!

Use $(this) instead of $('.btn') since you want to target the specific element
var getParentID = $(this).parent().attr('id');
Once the id is available use jquery id selector to target the element
$(document).ready(function() {
$('.btn').on('click', function() {
var getParentID = $(this).parent().attr('id');
$("#" + getParentID).remove();
});
});
#box {
width: 200px;
height: 200px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='some classes' id='box1'>
<span class='btn btn-primary'>Close this div</span>
</div>
<div class='some classes' id='box2'>
<span class='btn btn-primary'>Close this div</span>
</div>
Note: The answer is specific to your question.Alternatively the parent div can be removed even without getting it's id

What you want to do is to skip the jQuery and do it in pure javascript.
var parent = child.parentElement;
parent.parentElement.removeChild(parent);

Clear part of div

This pop-up-category has height 0. When button is pressed, i am adding height 100%. Inside have pop-up-wrap-category div where my data is stored.
Also have div for user controls ( Close pop-up).
<div class="pop-up-category">
<div class="pop-up-wrap-category">
<p>clear just this content</p>
//this this should be still visible(populated)
<div class="user-controls">
<span class="close-popup btn btn-danger">Close</span>
</div>
</div>
</div>
js :
$(document).on("click", ".close-popup", function () {
// console.log("sdasd");
$('.pop-up-wrap-category').empty();
});
How to clear content from pop-up-wrap-category but users controls still stay visible ?

Find the p and clear p
$(document).on("click", ".close-popup", function () {
// console.log("sdasd");
$('.pop-up-wrap-category > p').empty(); //use .remove() if you want to get the p tag deleted from DOM
});

How to toggle visibility of several divs separately

I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}

The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword

Many toggle-slide elements in one page

I use this script multiple times to hide some text:
$(document).ready(function(){
$("#button_to_click_to_toggle").click(function(){
$("#hidden_div").slideToggle("medium");
});
});
I want to make it impossible to toggle two hidden divs at once.
Example:
Click on one button (#button1) = the hidden div (#div1) associated to that button shows.
Click another button (#button2) = The div (#div2) associated to that button shows and at the same time #div1 closes (slide to close).
Click another button (#button3) = The div (#div3) associated to that button shows and at the same time #div2 closes (slide to close).

Add a class .button to all of the buttons and .div to all divs. Then it's just a matter of:
$(".button").on('click', function () {
var id = this.id.replace('button', '');
//properly toggle visibility of selected div
if ($("#div" + id).is(":visible")) {
$("#div" + id).slideUp();
}
else {
$("#div" + id).slideDown();
}
//hide all divs except the selected one
$(".div").not("#div" + id).slideUp();
});
http://jsfiddle.net/6Lhxm/

Could also hide all the divs on click and then show only the associated one:
javascript:
$(document).ready(function () {
$("button").click(function () {
$("div").hide();
$(this).next().show();
});
});
html:
<button type="button">one</button>
<div id="one">one</div>
<button type="button">two</button>
<div id="two">two</div>
<button type="button">three</button>
<div id="three">three</div>
http://jsfiddle.net/x7Ehq/

on .bind('click') it is not deleting the first div

When I click on a particular div, that div should fade out, simple, but when I click on one of the divs it deletes the div on top of the stack, i.e. when I click #sel6 it removes sel5
HTML code
<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">
<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>
</div>
jQuery code
sel_id, sel_1 are variables
$('.selc_d').bind('click',function(){
var sel_id = $('.sel').attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});

$('.sel').bind('click',function(){
var sel_id = this.id; // replace this line using this.id or $(this).attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});
Note the use of this... this will contain the element that is clicked.
What you were doing was
var sel_id = $('.sel').attr('id');
Which will always select the first div with class sel in this case the div with id sel5
##WHAT YOU WANT##
<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">
<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>
</div>
$('.sel').bind('click',function(){
var sel_id = $(this).attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});

it looks like, you are trying something like this
$('.sel').bind('click', function(){
$this = $(this);
$this.fadeOut('slow', function(){$this.remove();});
$('.search_box').append(this.id);
});

That's because you are saying $('.sel')
You need to grab the one that is clicked, not any one that has that class. To make that work as you want, do this
$('.sel').click( function() {
var sel_id = $(this).attr('id');
$(this).fadeOut('slow');
// Wait for it to fade out before you remove it
setTimeout( function() {
$('#' + sel_id).remove();
}, 1000 );
$('.search_box:first').append(sel_id);
});