We Keep Coding

jquery children first remove class

I have a web page that has a few elements hidden on load here is the sections html layout
As you can see their is a button that on click i need to remove the hidden class on the next child here is the jquery code.
$(document).on('click', '#find-button', function (e) {
$('#find-data').children().first('.hidden').removeClass('hidden');
});
not sure what is happening but the code does not work

The logic isn't quite right.
first() returns the very first element in the collection so as written you would have the first child.
Use the .hidden selector on children() instead to filter only the ones with that class, and get first() of that reduced set
Change to
$('#find-data').children('.hidden').first().removeClass('hidden');

Toggle show/hide (jQuery)

There are many posts on this topic already but none that address my issue directly. Here is my current setup:
I have a div with the ID #ptwesv;
and another div containing the content I want to show hide with the ID #ptwest.
The jQuery I'm using is this:
<script>
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").show();
});
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").hide();
});
</script>
This is hiding the #ptwest container correctly on click, but then doesn't show the conatiner when I click the trigger element (#ptwesv) again. I presume this is because once the element has been hidden, clicking on the trigger again is causing the actions to work against each other.
I'm using this W3 exmaple as a reference, the only salient different I notice is that there are different trigger elements for show/hide.
Is it possible to trigger show/hide of an element from the a single div and how can I get this to work?

jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});
is the way you want. It toggles the element. So if it is shown it hides and the other way around.
At the moment the element will always hide, because of twice the same click element.

Because Id is unique for whole document. try with toggle()
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});

The toggle() method toggles between hide() and show() for the selected elements.
This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
$("#ptwesv").click(function(){
$("#ptwest").toggle();
});

Delete a selected div

Script explanation : I have a text area which user is typing notes and those notes are added to the DOM (as div elements) . I created an icon inside that divs that when you click on it i want the parent of the icon that is clicked to be removed from the DOM . I achieve this with JQuery , but i cant do it in pure JS. The code i use to achieve this in:
$('.fa-window-close').on('click', function(event){
event.preventDefault();
console.log($(this).parents('div')[0]);
$(this).parents('div')[0].remove();
});
Iam posting a link from gist, its a part code of my project so you can understand what iam trying to achieve.
https://gist.github.com/Clickys/43856fe26ee4c061cf910a9211f0c142
Basically what i want to achieve is , lets assume that we have a button that is creating divs elements inside DOM. Each of this div has an icon(fontawesome) that if we click on it , the selected target should be removed from the DOM(the target div) but not the other divs . I tried to use event.target and a lot of things but sadly i couldn't solve this with pure JS.
I tried this
closeTolPos.addEventListener('click', function(e){
var parentEl = e.currentTarget.parentNode.parentNode;
parentEl.removeChild(this.parentElement);
console.log(this.parentElement);
});
But it seems that when there are more than 1 element , it doesnt work . It only works if there is one element.

We make some changes and now the code works:
(function() {
document.addEventListener('click',function(e) {
if (e.target.closest('.notesDecoration')) {
e.target.closest('.notesDecoration').parentNode.removeChild(e.target.parentNode);
}
});
})();
Now click event is binded to a document, so the element exists, when the page is loaded. Then I check if the clicked element was the element, which was recently created and added to DOM.

Javascript sibling onclick

This is related to a question I've asked previously: Calling Javascript function after loading an AJAX page
Basically, before all the thumbnails were loaded dynamically into one container called #left_box. Using the script below, I can get it to highlight one div out of all the siblings.
$('.thumbnail_small').live('click', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
However, in order to accommodate a new feature, I had to split the thumbnails into even more containers called .contain. Basically #left_box contains a series of .contain that hold x number of thumbnails. Now when I click on a thumbnail in one .contain, it only affects the siblings within that container rather than the larger container #left_box.
I tried
$('#left_box').on('click', '.thumbnail_small', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
but it doesn't work. Any ideas? Thanks in advance.

I'd suggest repeating your seletor, using the not method to exclude the current element:
$('#left_box').on('click', '.thumbnail_small', function(){
$(this).css('border-color','#000');
$('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});
This will select all .thumbnail_small inside your #left_box, exclude the clicked one, then applying the css to the rest of them.

Recursive jQuery function to amend select option values

I have a form that I am trying to alter with jQuery. Basically, my form has two elements and I need to change the value of the first option in each of them. However, there is an "add more" option that uses AJAX to dynamically generate another element that also needs changed. This add more button can be clicked an unlimited amount of times.
Right now I have this:
$(document).ready(function(){
$("#myname-0-field option:first").val("None");
$("#myname-1-field option:first").val("None");
});
This works fine, but once the "add more" button is clicked, I have more elements called "#myname-2-field", "#myname-3-field", "#myname-4-field" etc. These obviously aren't affected by adding another line into my jQuery as the document has already loaded when they are added.
So the real question is, can someone point me in the right direction of writing a function that can react when the new element is added and change it. If possible, I'm also looking for the function to be aware and look for "#myname-X-field option:first" for tidyness.

use live() function
Then using each function set value

From the jQuery API look live function
Maybe you could add class to your element, so that finding particular element would be easier and it would not add event to other similar elements.
In the example I have a Li with class
$('li.myClass').live('click', function() {
$(this).val(); // this is the getter for clicked value
$(this).val("some_value_here"); // this is the setter for clicked value
});
Now you can add more elements (that has myClass class) and it will have a click event.
Btw. if you know that all elements are inside some container (div for example) then you can write more efficient jQuery using delegate.
$('#container_id').delegate('li.myClass', 'click', function () {
});
This is more efficient because it looks your new elements only under "containter" not from the whole DOM structure.