We Keep Coding

How to re-open something after used `JQuery.remove()`?

I used a free template for my app and with this template there is a button to "hide" list like this:
the little x button
And the executed code is the following one:
$(document).on('click', '.close-link', function () {
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
Now I'm trying to add a button to re-open this list but here comes the struggle I can't find a way to do that. I checked the documentation of JQuery remove() and there is not JQuery open()...
Do you guy have an idea ?
[EDIT] maybe the HTML would be great so :
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Machines</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
<li class="dropdwon">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu"></ul>
</li>
{{#if isNotHome}}<li><a class="backLocalHostDocker"><i class="fa fa-home"></i></a></li>{{/if}}
<li><a class="close-link" id="closeList"><i class="fa fa-close"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<ul class="container"></ul>
</div>
</div>
</div>
I just cleaned the code to just display the structure

In that case do not remove() which eliminates the element from DOM.
Just use
$BOX_PANEL.hide();
Then whenever you feel like showing it back, use
$BOX_PANEL.show();

Use jQuery detach()
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
jQuery detach()

You can use jQuery toggle() function to Show/Hide Tags
Example :
$(document).on('click', '.close-link', function () {
$('.x_panel').toggle();
});
Now, you can show/hide your .x_panel block by clicking .close-link
Here is the details about toggle() function.

How to get list item's id in unsorted list load by JSON

The below portion of code works good:
<div id="newsListDiv">
News: <br /><br />
<ul id="newsList">
<li id="0">
News 1
</li>
<li id="1">
News 2
</li>
<li id="2">
News 3
</li>
</ul>
</div>
<script>
$("#newsList li").click(function () {
alert($(this).attr("id"));
});
</script>
But if I comment the UL and I load it via JSON, the script that returns me the id of the list item, seems doesn't work.
Here there is the example: http://jsfiddle.net/tLrjbquq/1/
Can anyone help me?
Thanks in advance.

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically.
General Syntax
$(staticParentSelector).on('event','selector',callback_function)
Example
$("#newsList ").on('click', 'li', function () {
alert("ID --> " + $(this).attr("id"));
});
Fiddle

jquery this.siblings not working correctly

I'm currently working on making a timeline for a website page that displays the years and then when clicked it should open up and display what happened in those years and keep the other stuff from other years hidden. For some reason my jquery is doing the opposite it keeps what i click on and hides every other year and their data.
Here is my HTML
<div class="timeline">
<ul>
<li class="timeli">1996
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
</ul>
</li>
<li class="timeli">1997
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">Test</p>
</li>
</ul>
</li>
<li class="timeli">1999
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
</ul>
</li>
</ul>
</div>
Here is my jquery I guess my problem is that i dont fully understand the .sibling in jquery.
$(document).ready(function(){
$(".timeli").click(function(){
$(this).siblings($(".timeUlSub")).slideToggle("slow", function(){});
});
});
HERE IS THE EDIT FOR ANSWER it works perfectly for me thanks for the help!
$(document).ready(function(){
$(".timeli").click(function(){
$(this).find($(".timeUlSub")).slideToggle("slow", function(){});
});});

timeUlSub is the child of timeli, and not sibling (same-level elements). Use find() or children()
$(this).find(".timeUlSub").slideToggle("slow", function(){});
or
$(this).children(".timeUlSub").slideToggle("slow", function(){});
Note : children() searches for first-level children only, find() searches children, grand-children and so on.

.timeUlSub is child of clicked li element. thus you need to use .find() instead of .siblings().You also do not need the jquery object, you can simply use the selector for required element:
$(this).find(".timeUlSub").slideToggle("slow", function(){});
Complete Click Event:
$(".timeli").click(function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});

I believe you want to hide the child ul of the other elements, but also show those of the one that has been clicked...
$(document).ready(function () {
$(".timeli").click(function () {
$(this).siblings().find(".timeUlSub").hide("slow");
$(".timeUlSub", this).show("slow");
});
});
This behaviour is "open the one I click and hide the rest".
If you want "toggle the one I click", you don't need to worry about siblings at all.
$(".timeUlSub", this).slideToggle("slow");
See it in action on JSFiddle, or the second version.

.timeUlSub is not a sibling, rather a child element of .timeli.
You should refactor your code to:
$(".timeli").click(function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});
And an even better implementation would be to delegate the click:
$(document).on("click", ".timeli", function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});

Angularjs-UI sortable multiple div list

I am trying to get sortable to work.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
</li>
</ul>
I can't seem to grab and drag anything. The important part of this question is the 3 div's in the li
I admit, I don't understand what this line in the docs means: "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)."
And I am able to get it to work with a table.
Any insights?

Yes, the docs do say "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)." which makes it hard to have 3 divs in the li. However, there is a solution.
You can use tg-dynamic-directive (at https://github.com/thgreasi/tg-dynamic-directive) to solve this. Don't forget to include it, and put 'tg.dynamicDirective' in your dependencies. Basically you take out the middle part in between the li tags, in this case the 3 divs, and you put it in another file and link to it.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
</li>
</ul>
Then in another file put the innards, like innards.html:
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
And replace the innards with:
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<tg-dynamic-directive ng-model="c" tg-dynamic-directive-view="getView">
</tg-dynamic-directive>
</li>
</ul>
And in your controller put something like:
$scope.getView = function(item) {
if item {
return 'innards.html';
return null;
};
Anyways the docs go over it pretty well. I realize this question is pretty old but I just ran into this myself and got it working so hopefully it helps someone else.

create html drop down based on items listed on a page

I have a HTML drop down menu which works fine, but it is completely static.
ie. the items within the menu are manually entered to match the links on the main header page
eg.
<li><a class="tab" href="http://">INTERNAL</a>
<ul>
<li>Internal docs</li>
<li>SQL</li>
<li>Downloadables</li>
</ul>
</li>
The menu is made up of the 3 links for sections which reside within the INTERNAL page.
If I add any sections to the INTERNAL page I have to manually amend my menu to reflect this, but I would like this item to be added automatically if I add a new page
Can this be done?
I hope so!
**EDIT:
To be clearer on this issue; I have the following html:
<div id="category_2232" class="category">
<div class="column" id="forum_259962">
<h3 class="clearfix"><span>Internal KB Documents</span></h3>
</div>
<div class="column" id="forum_20160368">
<h3 class="clearfix"><span>Downloadable Extras</span></h3>
</div>
<div class="column" id="forum_20632406">
<h3 class="clearfix"><span>SQL Scripts</span></h3>
</div>
</div>
which I use as a guide for creating my menu, which takes the form:
<li><a class="tab" href="http://">INTERNAL</a>
<ul>
<li>Internal KB Documents</li>
<li>Downloadable Extras</li>
<li>SQL Scripts</li>
</ul>
</li>
I would like to take the first code, and whenever I add a new <div>, I want a corresponding <li> entry on the menu to be updated automatically.
Please help!
Im sooo sure I could do this!
There has to be some JS somewhere that can generate menu items....
Many thanks to all involved so far
Howie

When the DOM is ready, find your list items and use the text of the anchors to create option elements which you can append to the select. It will make querying the DOM much easier if you add some ID's to your markup.
Working Demo
jQuery
$(function () {
var select = $('#internal-select');
var items = $('#internal-list li a').each(function () {
var text = $(this).text();
select.append('<option value="' + text + '">' + text + '</option>');
});
});
HTML
<li><a class="tab" href="http://">INTERNAL</a>
<ul id="internal-list">
<li> Internal docs</li>
<li>SQL</li>
<li>Downloadables</li>
</ul>
</li>
<select id="internal-select"></select>