We Keep Coding

how to access multiple class of child tags and the child tags themselves of a parent element in html using javascript?

I am creating a page where the user checks the checkbox of the dish name and set the quantity of orders they want for that particular dish. I want to give it a logic where it increments the quantity of a dish only when that particular dish is checked.
To do this all I can think of is to use the child elements of the ul element in the form section. I want to write a function in js that first checks if the checkbox of a particular li element is checked or not. If checked then only will it increase the quantity on the button pressed. But I can't figure out how to do so.
This is my HTML code.
<form>
<ul id = 'food_tracker'>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-" value="Tandoori Chicken"/>
<label for="food-item-one">Tandoori Chicken</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p id="value">1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p>$150</p>
</div>
</li>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-two" value="Schezwan Chicken"/>
<label for="food-item-two">Schezwan Chicken</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p>1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p>$329</p>
</div>
</li>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-three" value="Chicken Lollypop"/>
<label for="food-item-three"> Chicken Lollypop</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p>1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p>$229</p>
</div>
</li>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-four" value="Russian Chicken"/>
<label for="food-item-four">Russian Chicken</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p>1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p>$157</p>
</div>
</li>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-five" value="Afghani Chicken"/>
<label for="food-item-five">Afghani Chicken</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p>1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p value="149">$149</p>
</div>
</li>
</ul>
</form
In the javascript section, I am trying to use conditionals that if the checkbox of a particular element is checked only then can the quantity increase or decrease.
This is the link to the page
Online_Order_Page
Please correct me on where and what am I doing wrong.
I also want to create a function which will increase/decrease the pricing as the quantity for that particular dish increases/decreases.
Some tips on this will be appreciated as well.

Couple of things:
At the end of the js code, you loop through the items, and only attach an event listener to the buttons, if they are checked (by default, none of them are checked, so no event listeners are registered).
You try to attach an eventlistener to the increment/decrement buttons, but that's a NodeList of the buttons, not a single button.
You only have 1 count variable, and all the buttons are changing it. You need to keep count of each individual item's count.
A tip: Try to store your data in a different data structure. For example in an array of objects:
let items = [
{
id: 1,
name: 'Tandoori Chicken',
count: 1
checked: false,
},
{
id: 2,
name: 'Schezwan Chicken',
count: 1
checked: false,
},
...
];
You don't have to hard code them one-by-one, you can loop through the html items, get the names, the ids and the count and checked are always 1 and false by default.
While looping through them, you can attach an event listener to the checkbox, that sets the object's checked attribute to true/false, and the increment/decrement changes the count of the given object.
You will also be able to replace the shown amount within the event listener.

How to check if at least one radio button is checked

I'm actually stuck on my form validation because I want to check if there is at least one radio button checked. I did this for my text input validation successful but for the radio buttons it doesn't work.
$('#next').click(function() {
var isValid = true;
$('.personal-informations, .gender, .goal').each(function(i, obj) { //.personal-informations are my text inputs in another section of my form and .gender and .goal are my radio button classes
if ($(this).val().trim() === '') {
$("html, body").animate({scrollTop: $('.progressbar-header').offset().top-100}, 250);
$(this).closest('.questions').find('.error').css("visibility","visible");
$(this).css('border-color', "#B33C3D");
$(this).closest('.questions').find('.error').text('Dies ist ein Pflichtfeld.');
isValid = false;
}
if ($(this).is(':checked').length > 0) {
} else {
$(this).closest('.questions').find('.error').css("visibility","visible");
$(this).closest('.questions').find('.error').text('This field is required.');
isValid = false;
}
});
});
<div class="field goals-icon goals">
<span class="title">Some Text</span>
<div class="questions">
<div class="questions-fc-1 questions-fcm-2 radio-button">
<input id="muscle-goal_1" name="goal" class="goal" value="1" aria-required="true" type="radio">
<label id="fc-goal_1" aria-controls="#muscle-goal_1">
<img src="" alt="">
<span>Some Text</span>
<div class="error"></div><!--This is my error class which should be visible if there is no checkbox from this section checked-->
</label>
</div>
<div class="questions-fc-1 questions-fcm-2 radio-button">
<input id="weight-loss-goal_2" name="goal" class="goal" value="2" aria-required="true" type="radio">
<label id="fc-goal_2" aria-controls="#weight-loss-goal_2">
<img src="" alt="">
<span>Some Text</span>
</label>
</div>
<div class="questions-fc-1 questions-fcm-2 radio-button">
<input id="figure-workout-goal_3" name="goal" class="goal" value="3" aria-required="true" type="radio">
<label id="fc-goal_3" aria-controls="#figure-workout-goal_3">
<img src="" alt="">
<span>Some Text</span>
</label>
</div>
<div class="questions-fc-1 questions-fcm-2 radio-button">
<input id="health-goal_4" name="goal" class="goal" value="4" aria-required="true" type="radio">
<label id="fc-goal_4" aria-controls="#health-goal_4">
<img src="" alt="">
<span>Some Text</span>
</label>
</div>
</div>
</div>
<div type="next" id="next" class="forward-button"></div>

.is() returns true, false, or undefined, so checking for truth without the .length works. Also you need to re-factor that conditional to traverse up the dom tree to the container (or form), then look for siblings within that.
Replace this:
if ($(this).is(':checked').length > 0) {
With this:
if ($(this).parents('.questions').find('input[type="radio"]').is(':checked')) {
Based on your example, I'm not sure if you need to tweak the .parents() or .find() selectors. You may need to make them more specific to stick to the groups of radios (rather than finding all radios). Here is a demo, look at the console and it will log validate fails: https://jsfiddle.net/jpnaccn3/

How to iterate through attributes of child and rename it Jquery?

I have this markup. I am trying to write jquery selectors to get all element inside template order list whose name has Works string. My requirement is that I have multiple ordered list. If I will delete any list I want to rearrange indexes in name attribute.
<ol class="template">
<li>
<span class="label" name="Works[0].Id"></span>
</li>
<li>
<input id="textBox" type="text" value="" name="Works[0].Body">
</li>
<li>
<input type="checkbox" id="checkbox" value="" name="Works[0].IsCompleted">
<input type="button" id="delete" value="Delete">
</li>
</ol>
<ol class="template">
<li>
<span class="label" name="Works[1].Id"></span>
</li>
<li>
<input id="textBox" type="text" value="" name="Works[1].Body">
</li>
<li>
<input type="checkbox" id="checkbox" value="" name="Works[1].IsCompleted">
<input type="button" id="delete" value="Delete">
</li>
</ol>
<ol class="template">
<li>
<span class="label" name="Works[2].Id"></span>
</li>
<li>
<input id="textBox" type="text" value="" name="Works[2].Body">
</li>
<li>
<input type="checkbox" id="checkbox" value="" name="Works[2].IsCompleted">
<input type="button" id="delete" value="Delete">
</li>
</ol>
My approach is to after I will remove any order list i.e. after click of delete button. I will take every ordered list and by iterating through I will change index for 0 to length of list. But I am not getting proper selector to catch elements inside an ordered list whose name attribute has value starts with Works. Please suggest some better selector.

The selector you want is:
$("ol.template [name^=Works]")
This is the jQuery Attribute Starts With selector.
By the way, name is not a valid attribute on <span> elements. It should only be used for the following elements:
<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

here is pure javascript working with majors browsers
var ol = document.getElementsByTagName('ol');
var temp = ol.getElementsByClassName('template');
for(var i=0;i<temp.length;i++){
if(temp[i].name.indexOf('Works')==0){ // if name attribute start with 'Work'
//if(temp[i].name.indexOf('Works') > -1){ => if name attribute contains 'Work'
//if(temp[i].name.indexOf('Works') == -1){ => if name attribute is not contains 'Work'
//if(temp[i].name.indexOf('Works') == temp[i].name.length - 'Works'.length - 1){ => if name attribute is ended with 'Work'
// now play with with temp[i]
temp[i].style.background = 'yellow';
}
}

How to remove <li> element?

Following is my HTML code:
<form name="package_type_documents" action="" method="post" enctype="multipart/form-data">
<div class="hor-form">
<ul>
<li>
<div class="answer-block" id="doc_title">
<span>Add More Documents</span>
<ol>
<li id="ttl1" class="ptdoc">
<li class="ans_li">
<span class="num-block">1 </span><span class="num-block reqd">*</span>
<label>Document Title</label>
<input type="text" name="pt_doc_title[1]" id="pt_doc_title_1" value="Prabhakar Bhosale" />
</li>
<li class="ans_li">
<span class="num-block"> </span><span class="num-block reqd"> </span>
<label>Document File</label>
<p class="uploadBtn"><input type="file" name="document_file_name_1" id="document_file_name_1"/>
</p>
</li>
<li class="ans_li">
prabhakar_bhosale.docx
</li>
<li class="ans_li">
<input type="checkbox" name="delete_file_1" id="delete_file_1" class="custom-check" />
<label for="show">Delete document</label>
</li>
<input type="hidden" name="pt_doc_id[0]" value="19" />
<input type="hidden" name="pt_doc_old_file_iname[0]" value="prabhakar_bhosale.docx" />
</li>
</ol>
<span>Add More Documents</span>
<p class="fade">Note * (Image size should be less then 1 mb and allowed image types are jpg, jpeg, gif, png .)</p>
</div>
</li>
<li>
<p class="last">
<input id="saveForm" class="c-btn" type="submit" name="submit" value="Update"/>
<input type="button" class="c-gray-btn" name="back" value="Back" onclick="javascript:window.location.href='http://localhost/eprime/entprm/web/control/modules/package_type/view_package_type.php?page=1'" />
</p>
</li>
</ul>
</div>
</form>
Following is my jQuery code:
<script type="text/javascript">
function delete_title(field) {
$('li'+'#'+field).remove();
}
</script>
The following code is not deleting the concerned . I tried many tricks but still it's not removing. Can anyone please help me in this regard?

check demo and check how call function
function delete_title(field) {
$("#"+field).remove();
}
delete_title('ttl1');
demo

I am sure you must be having ids unique for li element. And For deleting element using id. You can use:
$('#'+field).remove();

$('li').remove();
this Will remove all the li elements
and below code will remove specific Li element from UL.
`$('#li_yourId').remove();`

If you want to delete <li> element with given id then you can write:
$('#'+field).remove();
No need to write li.

Try this one is Javascript:
var elem = document.getElementById('id');
elem.parentNode.removeChild(elem);

jquery wrap more than one element

I am looking to wrap an element with the following code:
$('.sltxt').wrap('<div class="wrapCheck"><input type="checkbox"><div class="chkbox"></div></div>');
I am getting this:
<div class="wrapCheck">
<input type="checkbox">
<div class="sltxt">
text
</div>
</input>
<div class="chkbox"></div>
</div>
However, I would like the code to be wrapped like this:
<div class="wrapCheck">
<input type="checkbox">
<div class="chkbox">
</div>
<div class="sltxt">test</div>
</div>
is there any way to make this happen? (also input adds an unwanted </input>)
edit: upon further inspection, I actually need the following code:
<li>
<span class="pk-add_small"></span>
<div class="wrapCheck">
<input type="checkbox">
<div class="chkbox"></div>
<span class="sltxt">Κεντρική Κατηγορία 2</span>
</div>
</li>
and I have this code:
<li>
<span class="pk-add_small"></span>
<input type="checkbox">
<span class="sltxt">Κεντρική Κατηγορία 2</span>
</li>

I think you're looking for this... first wrap in the outer element, then add the other elements:
$('.sltxt')
.wrap('<div class="wrapCheck"></div>')
.before('<input type="checkbox" /><div class="chkbox"></div>');
http://jsfiddle.net/pmLdz/

$('.sltxt').wrap('<div class="wrapCheck">')
.parent() // traverse up to .wrapCheck then prepend the input
.prepend('<div class="chkbox"><input type="checkbox"/></div>');
http://jsfiddle.net/nZdMD/