Develop Reference

How do I remove an input field after it's being emptied

I am adding input fields on keystroke, by using an example from the answer for this question. This is my example. I was trying in various ways to remove field if user deletes content from it, so that there are always fields that have some content and one last empty field for adding more, but I just can't find a solution.
This is the code:
$(document.body).on("input", ".external-media-input:last", function () {
var inputID = (parseInt($(this).attr('id')) + 1);
$(".input_fields_wrap").append('<div><input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/></div>');
});

You can use on('blur') or .on('focusout')
//...
.on('blur', ".external-media-input:not(:last)", function () {
if(!$(this).val()) $(this).remove();
});
JSFiddle

You can use also on('keyup')
$(document.body).on("keyup", ".external-media-input", function(){
if($(this).val() == '')
$(this).remove();
});
here is your fiddle: https://jsfiddle.net/bembvptx/2/

In your style add one more event:
$(document.body).on("input", ".external-media-input", function () {
if (!$(this).val())
{
$(this).remove();
}
});

jQuery: using ".each" for a select's options by $(this)

I know there are a lot of similar questions but I still could not find one about my exact problem. I haven't got the selector of my <select>; I am iterating form fields and so i only got access to my select by using $(this).
how can I iterate this select's options by using jQuery's '.each' function?
i tried to chain it, but this doesn't work:
$(this).$('option').each(function(){
if (this.value == val) {
// do something
}
});
note: $(this) is my select not my form.

Try this : you can use .find() to get option under select.
Note: - this.value refers to current option value inside loop.
$(this).find('option').each(function(){
if (this.value == val) {
// do something
}
});

Because your this is a reference to the select element you also have access to its .options property which you can wrap in a jQuery object:
$( this.options ).each( function(i, option){
if (this.value == val) {
// do something
}
});
http://jsfiddle.net/x57d8msL/

$.each($('select'), function (key, val){
console.log($(val));
});

Find and replace an option in select field

I am trying to find and replace an option in select box,
I am using this piece of code but this isn't working Help me out please!
$(".select" option).each(function() {
if $(this).val() == "Unknown" {
$(this).val().replaceWith( "---------" );
}
});

You need to put option inside the selector and use setter version of val():
$(".select option").each(function() {
if $(this).val() == "Unknown" {
$(this).val("---------");
}
});

something like this would also work:
$('#mySelect option:contains("Unknown")').text("---------");
http://jsfiddle.net/tKP68/

try out this...
$(".select option").each(function() {
if $(this).val() == "Unknown" {
$(this).val().replaceWith( "---------" );
}
});

Depending on what you want achieve:
$('select option').each(function () {
if (this.value === 'Unknown') { // You should always use === instead of ==
this.value = '---------'; // Change value
this.innerText = '---------'; // Change the option's text
}
});

How to reset fields values out of html form with jQuery

How to reset <INPUT> and <TEXTAREA> values with jquery click() if these elements are not part of any <FORM>?

You can reset the values using defaultValue property, both HTMLTextAreaElement and HTMLInputElement support the property, the default value is the value as originally specified in HTML that created these objects.
$('#reset').on('click', function() {
$('input, textarea').val(function() {
return this.defaultValue;
});
});
In case that you only want to reset the values of inputs and textareas that don't belong to a form element you can use .filter() method:
$('#reset').on('click', function() {
$('input, textarea').filter(function() {
return !this.form;
}).val(function() {
return this.defaultValue;
});
});
If the form property is null the input/textarea is not descendant of a form element.
http://jsfiddle.net/E2tbk/

This works:
var elements = $('input,textarea');
$('button').click(function () {
elements.each(function () {
if (!this.form) this.value = this.defaultValue;
});
})
Fiddle

use this:
document.getElementById('yourInputID').value = "";

This solution stores the initial values in the data-oldvalue attribute of the element. When you click the restore button it sets the values back to the initial ones.
Some pointed out you should use .html() to set the value of the textarea. I tried this but it did not set the value while .val() did
$("input").each(function() {
$(this).attr("data-oldvalue", $(this).val());
});
$("textarea").each(function() {
$(this).attr("data-oldvalue", $(this).html());
});
$("button").click(function() {
console.log($(this).attr("data-oldvalue"));
$("input").each(function() {
$(this).val($(this).attr("data-oldvalue"));
});
$("textarea").each(function() {
$(this).val($(this).attr("data-oldvalue"));
});
});
See: http://jsfiddle.net/zvPK7/

Try this:
$('#click').on('click', function() {
$("input[type='text'], textarea").val('');
});

Try This...
$('#btnID').click(function(){
$('#FormID')[0].reset();
});

How to select element which is not 'this'?

I have list of divs all with the same class, I want to apply a function to all of them which are not the clicked one (this), how can i select !this with jQuery?
UPDATE:
I've made this and it is not working, any ideas why?
$("li").each(function(){
$("li").not(this).click(function(e) {
$(this).hide();
});
});
UPDATE 2: this is the whole actual code:
$(".mark").click(function(e) {
e.preventDefault();
var id = "#" + $(this).parent().parent().parent().parent().attr("id") + " ";
var currentStatus = "deleted"; // to be replaced with actual status
var currentStatusClass = "." + currentStatus + "-heading";
$(id + currentStatusClass).show();
$(id + ".edit-headings").click(function(){
$(this).find(".headings-status").show().addClass("bg-hover");
$(id + ".headings-status").click(function() {
$(id + ".headings-status").not(this).hide();
});
});
});

Have a look at jQuerys not function: http://api.jquery.com/not/
$('div').not(this).doSomething();
Regarding your update, try:
$("li").click(function(e) {
$("li").not(this).hide();
});

Use the .not() function:
$('.yourclass').click(function() {
$('.yourclass').not(this).yourFunc();
});

use $('div').not(this) to select other than clicked one.

using :not() or .not()
$this;
function myFunction(){
// stuff here // and use $this for element reference
}
$('yourElement:not(.selected)').on('click',function(){
// (make sure to add '.selected' to the new one and toggle existant)
$('.selected').removeClass('selected');
$this = $(this);
$this.addClass('selected');
myFunction();
});

this is wrong:
var newStatus = $(this).className().replace("contribution-", "");
className is not a function.
Instead of above line you can try this:
var cls = $(this).attr('class').replace('contribution-','');
$(this).removeClass().addClass(cls);