We Keep Coding

How to remove a div containing a checkbox with a specific id?

I have different checkboxes generated dynamically.
Each checkboxes are contained within a div.
I would like to do the following action with jquery:
If a checkbox has an id="aucune", then remove its container (the div containing the checkbox with the id="aucune") from the html page.
I tried the following code:
// wait for DOM to be ready
$(document).ready(function() {
var empty = $("input:checkbox[id=aucune]");
if (empty == true) {
$(this).parent().remove();
}
});
Here is a the very simplified html:
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Here is my codepen:
I am quite new to code, I apologize for my silly simple question.

You can directly select the id with jQuery and remove the parent.
$('#acune').parent().remove();
Or if you know the class of the parent element
$('#acune').parent('.wrapper-checkbox').remove();

You are wrongly referencing this. It should be this way:
Replace this with empty.
Replace the boolean check with count.
Note: You can also use $("#aucune") instead of the selector $("input:checkbox[id=aucune]").
// wait for DOM to be ready
$(document).ready(function() {
// Or here you can also use $("#aucune").
var empty = $("input:checkbox[id=aucune]");
// Check if it is found.
if (empty.length > 0) {
// Remove the parent.
empty.parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Boom! And the checkbox is gone! :)

You can directly use the aucune id selector in your JQuery and then get the closest div with class wrapper-checkbox to remove it:
$(document).ready(function() {
var empty = $("#aucune");
if (empty.length !== 0){
$(empty).closest('.wrapper-checkbox').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>

Try to do this..
$(document).ready(function() {
var checkbox = $("input:checkbox[id=aucune]");
if (checkbox.length > 0) {
checkbox.parent().remove();
}
});

Onclick set value to input

I want to change the value form input onclick. I've tried it but the input value don't change. Can't find the error. For example when I click on the choice-label the input should get the value 5.
$('.training-niveau .choice-label').click(function() {
$('#train-niveau').val(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field training-niveau-icon training-niveau">
<input id="train-niveau" class="train-niveau" name="train-niveau" value="1" type="radio" aria-required="true" autocomplete="off">
<li class="choice-line thirst-line">
<div class="choice-wrapper">
<div class="choice-label">4</div>
<div class="choice-line"></div>
<div class="choice-container">
<div class="choice-inset"></div>
<div class="choice-bg"></div>
<div class="choice-bd"></div>
<div class="choice-overlay"></div>
</div>
</div>
</li>
</div>

$('#train-niveau').val(this);
is setting the value of the input to the jquery object of the label.
use $('#train-niveau').val($(this).text());

Just calling this only pulls in the document object.
$('.training-niveau').on('click', '.choice-label', function() {
console.log($('#train-niveau').val()); //before
$('#train-niveau').val($(this).text());
console.log($('#train-niveau').val()); //after
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field training-niveau-icon training-niveau">
<input id="train-niveau" class="train-niveau" name="train-niveau" value="1" type="radio" aria-required="true" autocomplete="off">
<li class="choice-line thirst-line">
<div class="choice-wrapper">
<div class="choice-label">4</div>
<div class="choice-line"></div>
<div class="choice-container">
<div class="choice-inset"></div>
<div class="choice-bg"></div>
<div class="choice-bd"></div>
<div class="choice-overlay"></div>
</div>
</div>
</li>
</div>

this doesn't contain the value, but rather a whole set of functions and values (to verify, do console.log(this); If you want the value of this, use this instead:
$('#train-niveau').val(this.val()); < Which only applies if a value is set to your choice label.

Inside the click function this is the normal javascript DOM element, it is not a jQuery object. If you want to use .val() you need to convert this to a javascript variable
$('.training-niveau .choice-label').click(function(){
var $this = $(this);
$('#train-niveau').val($this.val());
});

Jquery does not set text box value

I am trying to set the value of a text box when file upload is selected , how ever it does not happen but I see correct value in alert box.
<div class="row">
<div class="col-xs-2">
<div class="file-label"><i></i>#Resources.FolderPath</div>
</div>
<div class="col-xs-4">
<input class=".form-control" name="fileText" type="text" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
<div class="col-xs-4">
<label id="fileSizeError" style="color: red"></label>
</div>
</div>
$(document).ready(function () {
$(document)
.on("change","#fileUpload",
function (e) {
alert($("#fileUpload").val());
$("#fileText").val($("#fileUpload").val());
alert("hi");
});
});
Please help me here.I am using Asp.net MVC as platform.

Your input has a name, but #fileText is an ID selector. Either add an id to it, or use an attribute selector to find it.
So either:
<input class=".form-control" id="fileText" name="fileText" type="text" />
<!-- add id------------------^^^^^^^^^^^^^ -->
or
$("[name=fileText]").val($("#fileUpload").val());
// ^^^^^^^^^^^^^^^---- use attribute selector

Try native js:
document.getElementById("fileText").defaultValue = $("#fileUpload").val();
OR
$("#fileText").attr("value", "some value");
Also;
Check to see if your original code works with replacing .val() with .text

Can't select and hide any previous element

I'm about lose my mind with this problem. No form of jQuery selector seems to work in dynamically finding any elements above the link. I'm trying to access an element above the link and hide it. Using things like parent(), prev(), before(), closest(), ect. will show a non-null object but it won't respond to the hide() method.
<div class="row">
<div class="col-xs-5">
<div id="test_fields">
<li id="test_input" class="string input optional stringish">
<label class="label" for="test_input">Ingredient name</label>
<input type="text" name="test_input" value="afsfasf" id="test_input">
</li>
</div>
<input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
Remove Ingredient
</div>
</div>
function remove_fields(link)
{
$(link).prev("input[type=hidden]").val('1'); // this doesn't work
var divToHide = $(link).prev('div');
$(divToHide).hide() // this doesn't work
//$('#test_fields').hide(); //this works
}

Try replacing the link as below:
Remove Ingredient
I'm not sure. But maybe this is the problem. Because I remember that I have had problem with 'this'previously and when I replaced that, it performed the job.

you can try .closest() and .find()
function remove_fields(link) {
$(link).closest('div[class^="col-xs"]').find("input[type=hidden]").val('1');
var div_to_hide = $(link).closest('div[class^="col-xs"]').find('#test_fields');
$(div_to_hide).hide();
//$('#test_fields').hide(); //this works
}

You can't change hidden input's "value" attribute by using .val(). You need to use:
$(link).prev("input[type=hidden]").attr('value', '1');
As I'm not really sure what do you want to do with this input, I'll just let it go like this.
.prev() fn goes only one previous element in the structure. As input is a <a>'s previous element, you can't select div like that. You can use .siblings() for instance.
$(link).siblings('div').hide();

If you break the code in pieces, it gets easier.
First I took the 'Link', from it I grabbed the nearest div above it, then I picked up the input.
I did not make many changes to your code.
function remove_fields(link)
{
var $link =$(link);
var $divToHide = $link.closest('div');
$divToHide.find("input[type='hidden']").val('1');
$divToHide.hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div id="test_fields">
<li id="test_input" class="string input optional stringish">
<label class="label" for="test_input">Ingredient name</label>
<input type="text" name="test_input" value="afsfasf" id="test_input">
</li>
</div>
<input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
Remove Ingredient
</div>
</div>

Why can't I remove an attribute of all children?

I have a cloned div containing input elements, all of which are disabled. I am trying to use the following JQuery code to remove the disabled attribute of each of the div's children.
clonedElement.children().removeAttr('disabled');
I do not have a ton of JQuery experience, so I am probably misunderstanding the way this is supposed to work. How should I be going about removing the "disabled" attribute from all children of the cloned node?
If it helps, clonedElement was created with the JQuery .clone() method.
HTML I AM USING TO TEST---
<div id="original_item" class="hidden">
<div class="row_submit">
<div class="med_field">
<p>Product:</p>
<select name="product[]">
<option></option>
</select>
</div>
<div class="small_field">
<p>Type:</p>
<select name="type[]">
<option></option>
</select>
</div>
<div class="small_field">
<p>Price:</p>
<input type="text" name="price[]" value="test" disabled="disabled" />
</div>
<div class="small_field">
<p>Quantity:</p>
<input type="text" name="quantity[]" />
</div>
<img onclick="removeItem(this);" title="Remove Item" style="margin: 18px 0 0 12px;" src="icons/cancel.gif" />
</div>
<input type="hidden" name="warehouse_data[]" />
</div>

children only looks in immediate children and if the clonedElement is not one of med_field/small-field then it would not work.
You can use find() instead to search for elements beyond immediate children.
i.e.
//for jQuery < 1.6
$("*", clonedElement).removeAttr("disabled");
//or
clonedElement.find("*").removeAttr("disabled");
//for jQuery >= 1.6
$("*", clonedElement).removeProp("disabled");
//or
clonedElement.find("*").removeProp("disabled");

jQuery <1.6 your current code should work.
jQuery 1.6+ do this: clonedElement.children().removeProp('disabled');
See this question .prop() vs .attr() for reasons why

as long as clonedElement is a jquery element you can do:
clonedElement.children().each(function() {
$(this).removeAttr('disabled');
});