just few month ago started learning programming. At the moment studying JS and want to make dropable droplist. Created few droplists and occur with the problem, what all dropdown lists opening after click. Need to be opened only one which was clicked:
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<div class="main">
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
</div>
And write simple JS vanilla code:
const droplistLabel = document.querySelectorAll('.droplist__selected');
const droplist = document.querySelectorAll('.droplist__items-container');
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', () => {
for (i = 0; i < droplist.length; i ++){
droplist[i].classList.toggle('display')
};
});
}
Can somebody tell me where i made a mistake?
https://codepen.io/miroso/pen/dyGXOYq
Thanks for helping me, want to ask extra question: Also, maybe could you suggest solution if for example click is made outside the div, what condition i should write in the code?
You are doing toggle to all the containers... you should toggle only the one that corresponds to clicked element... so in you javascript you should take care of that, if you change your javascript for:
const droplistLabel = document.querySelectorAll('.droplist__selected');
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', (e) => {
let parent, droplist;
// look for droplist__selected
parent=e.srcElement;
while(!parent.classList.contains('droplist__selected')) {
parent=parent.parentElement;
}
// get container of list and toggle
droplist = parent.parentElement.querySelector('.droplist__items-container');
droplist.classList.toggle('display');
});
}
As you can see, first get parent of clicked element that has class droplist__selected, then toggle list of parent container... and that's all.
Edit 1
Maybe this is more complicated... you have to:
Add event to document click to close all.
On an item click close all but clicked one.
Toggle clicked item.
So:
const droplistLabel = document.querySelectorAll('.droplist__selected');
document.addEventListener('click', (e) => {
// close all...
droplist = document.querySelectorAll('.droplist__items-container');
for(j=0;j<droplist.length;j++) {
droplist[j].classList.remove('display');
}
});
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', (e) => {
let parent, droplist, droplists;
// Cancel event to avoid document.click reached...
e.stopPropagation();
// look for droplist__selected
parent=e.srcElement;
while(!parent.classList.contains('droplist__selected')) {
parent=parent.parentElement;
}
// close all but clicked, get clicked and compare with the others...
droplist = parent.parentElement.querySelector('.droplist__items-container');
droplists = document.querySelectorAll('.droplist__items-container');
for(let j=0;j<droplists.length;j++) {
if(droplists[j]!=droplist) {
droplists[j].classList.remove('display');
}
}
// finally toggle clicked... get container of list and toggle
droplist.classList.toggle('display');
});
}
Hope it helps!!!
Change your javascript code to
Step 1: toggle the display clicked element, if already in shown state then hide and vice-versa
Step 2: for all the other element except the clicked item - remove the class to hide them
const droplistLabel = document.querySelectorAll('.droplist__selected');
const droplist = document.querySelectorAll('.droplist__items-container');
for (let i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', () => {
droplist[i].classList.toggle('display');**// toggle the display clicked element, if already in shown state then hide and vice-versa**
for(let j=0;j<droplist.length;j++)
{
if(i!=j)**//for all the other element except the clicked item - remove the class to hide them**
droplist[j].classList.remove('display');
}
});
}
Related
Please see the issue in action, here: https://streamable.com/n6np71
The issue is secluded to this area of code:
// check "Show all" on page load
$('#menu-checkbox-filters-all').prop('checked', true);
$(".filters input:not(#menu-checkbox-filters-all)").prop("checked", false);
var $checkboxes = $('.filters input');
$checkboxes.change(function(event){
let currentTarget = event.currentTarget;
// if all is selected, deselect others
if (currentTarget.id == "menu-checkbox-filters-all")
$(".filters input:not(#menu-checkbox-filters-all)").prop("checked", false);
else // remove the checked prop from all
$("#menu-checkbox-filters-all").prop("checked",false);
// if none is checked anymore, check all
if (!$checkboxes.filter(":checked").length)
$("#menu-checkbox-filters-all").prop("checked", true)
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
filters.push( this.value );
$grid.isotope();
});
filters = filters.join(', ');
$contentContainer.isotope({ filter: filters });
});
<div class="filter-menu">
<div class="menu-headers-section">
<div class="menu-tag"></div>
<div class="menu-language-checklist">
<h3 class="menu-heading">Language</h3>
</div>
<div class="menu-captions-checklist">
<h3 class="menu-heading">Captions</h3>
</div>
</div>
<div class="menu-content-section">
<div class="menu-tag">
<div class="list-content-section list-section-language-tags">
<div class="list-language-tag tag-language-all"><img class="icon-flag" src="/ASSETS/icon-star.svg" alt="">All</div>
</div>
</div>
<div class="menu-language-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value="*" id="menu-checkbox-filters-all">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="menu-content-section">
<div class="menu-tag">
<div class="list-content-section list-section-language-tags">
<div class="list-language-tag tag-language-irish"><img class="icon-flag" src="/ASSETS/icon-flag-ireland.svg" alt="">Irish</div>
</div>
</div>
<div class="menu-language-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".language-irish" id="language-irish">
<span class="checkmark"></span>
</label>
</div>
<div class="menu-captions-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".captions-irish" id="captions-irish" test-value="AAA">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="menu-content-section">
<div class="menu-tag">
<div class="list-content-section list-section-language-tags">
<div class="list-language-tag tag-language-korean"><img class="icon-flag" src="/ASSETS/icon-flag-south-korea.svg" alt="">Korean</div>
</div>
</div>
<div class="menu-language-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".language-korean" id="language-korean">
<span class="checkmark"></span>
</label>
</div>
<div class="menu-captions-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".captions-korean" id="captions-korean">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="menu-content-section">
<div class="menu-tag">
<div class="list-content-section list-section-language-tags">
<div class="list-language-tag tag-language-estonian"><img class="icon-flag" src="/ASSETS/icon-flag-estonia.svg" alt="">Estonian</div>
</div>
</div>
<div class="menu-language-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".language-estonian" id="language-estonian">
<span class="checkmark"></span>
</label>
</div>
<div class="menu-captions-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".captions-estonian" id="captions-estonian">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
To see full code, please view this:
https://codepen.io/sahilsignup/pen/oNMQJbq
Ideally, even after toggling a filter via the menu (i.e., whether there is a filter active or not), the search bar/filter should work.
Kindly note that Isotope is being used for filtering.
(Sorry for the outdated jQuery — essentially no knowledge of JS/jQuery, so this was taken from Codepen. The HTML has not yet been organized.)
Thank you!
I am currently working on a filter that displays products categories through Radio Button selection:
<div class="round" id="r-group">x
<label for="r2" class="label-filter">
<input type="radio" id="r1" name="club-selection" value="club-selection">
<span class="label-text">The Club Selection</span>
</label>
<label for="r2" class="label-filter">
<input type="radio" id="r2" name="upholstery" value="upholstery">
<span class="label-text">All Upholstery</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r3" name="casegoods" value="casegoods">
<span class="label-text">All Casegoods</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r4" name="tables" value="tables">
<span class="label-text">All Tables</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r5" name="lighting" value="lighting">
<span class="label-text">All Lighting</span>
</label>
</div>
I want to be able show each category as I select the radio buttons. For example: If I select All Casegoods, I want to only show the div with data-category="casegoods". If I select Tables and Lighting I want to show the div with data-category="tables" and data-category="lighting". These are the basic structure of the divs per category:
<div class="product" data-category="club-selection">
<h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
<h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
<h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
<h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
<h4>Lighting</h4>
</div>
So far, I am able to store the value of the selected radio buttons into an array (selectedValues), but I am not sure what to do next to be able to display only the divs of the categories selected.This is the code that store the values:
$(function(){
var items = $("[data-category]");//get all the elements that has data-categories attribute
items.show(); //show all of the elements we found above
$("input[type=radio]").on("change",function(ev){ //bind onchange event
var selectedValues = []; //this array will hold all of the current categories
$("input:checked").each(function(idx, checkedRadio){//get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
selectedValues.push($(checkedRadio).val().toLowerCase());
//THIS IS WHERE I´M STUCK. What do I do with the values stored in the array?
});
});
});
EDIT:fixed the ids on the inputs.
You can do something like this:
var elems = $("[data-category]").filter(function() {
return selectedValues.indexOf($(this).data("category")) > -1;
});
elems.show();
I believe you want to use checkbox and not radio, since you cant deselect them again. Else you have to use the same name so you cant select more than one.
Also please note that many of your inputs have the same id, ID should always be unique.
Demo
$(function() {
var items = $("[data-category]"); //get all the elements that has data-categories attribute
items.show(); //show all of the elements we found above
$("input[type=checkbox]").on("change", function(ev) { //bind onchange event
$("[data-category]").hide()
var selectedValues = []; //this array will hold all of the current categories
$("input:checked").each(function(idx, checkedRadio) { //get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
selectedValues.push($(checkedRadio).val().toLowerCase());
});
var elems = $("[data-category]").filter(function() {
return selectedValues.indexOf($(this).data("category")) > -1;
});
elems.show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round" id="r-group">
<label for="r2" class="label-filter">
<input type="checkbox" id="r2" name="club-selection" value="club-selection">
<span class="label-text">The Club Selection</span>
</label>
<label for="r2" class="label-filter">
<input type="checkbox" id="r2" name="upholstery" value="upholstery">
<span class="label-text">All Upholstery</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="casegoods" value="casegoods">
<span class="label-text">All Casegoods</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="tables" value="tables">
<span class="label-text">All Tables</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="lighting" value="lighting">
<span class="label-text">All Lighting</span>
</label>
</div>
<div class="product" data-category="club-selection">
<h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
<h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
<h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
<h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
<h4>Lighting</h4>
</div>
I have the following code:
JavaScript:
jQuery(".cbChild").on("change", function () {
//go to parent checkbox to see if it's check. If not, check it.
var parentElement = jQuery(this).closest('cbParentContainer');
//I've also tried
//var parentElement = jQuery(this).parentsUntil('cbParentContainer');
//And
//var parentElement = jQuery(this).parentsUntil('row');
if (jQuery(this).find('input[type=checkbox]').prop("checked")) {
parentElement.prop("checked", true);
}
});
HTML:
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
When one of the child checkboxes (class='cbChild') gets checked, I want to force the parent (class='cbParent') checkbox to also be checked. However, I'm unable to access the parent for some reason. The call to parentElement.prop("checked", true) fails because parentElement isn't the parent checkbox. To further clarify the issue, there are multiple cbEventsConainers with more parent/child checkboxes. I only included one for this post.
We are not dealing with a child-parent relationship here but the following will check the "parent" checkbox when at least one of the children is checked and will uncheck it otherwise.
$(function(){
$("body").on("change",".cbChild input",function(){
var cc=$(this).closest(".cbChildContainer"),p=cc.prev("div").find(".cbParent input");
p.prop("checked",$(".cbChild input:checked",cc).length>0);
});
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
I am working on some code that takes the selected value of the radio button and passes it to the next group of radio buttons to be used as input. The code works well when passing the first time, but any subsequent time, instead of passing the value, it passes "on." I think it's just something silly, but I haven't been able to figure it out.
Link to JS Fiddle: https://jsfiddle.net/hc3bracf/6/
Here is the HTML and JS:
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g1" id="i1" value="s#1" data-target="r65">
<label id="r1" for="i1">s#1</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g1" id="i2" value="s#16" data-target="r65">
<label id="r2" for="i2">s#16</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g2" id="i3" value="s#8" data-target="r66">
<label id="r3" for="i3">s#8</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g2" id="i4" value="s#9" data-target="r66">
<label id="r4" for="i4">s#9</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g33" id="i65" data-target="r97">
<label id="r65" for="i65"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g33" id="i66" data-target="r97">
<label id="r66" for="i66"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g49" id="i97" data-target="r113">
<label id="r97"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g49" id="i98" data-target="r113">
<label id="r98"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
JS
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs) {
inp.addEventListener("change", function() {
let targetLabel = document.getElementById(inp.dataset.target);
let targetRadio = targetLabel.previousSibling;
targetLabel.innerHTML = inp.value;
targetRadio.value = inp.value;
targetRadio.checked = false;
//while there is a next target clear it
while (targetLabel.previousSibling.hasAttribute) {
targetLabel = document.getElementById(targetRadio.dataset.target);
targetRadio = targetLabel.previousSibling;
targetRadio.checked = false;
targetLabel.innerHTML = '';
}
});
}
The previousSibling property returns the previous node of the specified node, in the same tree level.
The returned node is returned as a Node object.
The difference between this property and previousElementSibling, is that previousSibling returns the previous sibling node as an element node, a text node or a comment node, while previousElementSibling returns the previous sibling node as an element node (ignores text and comment nodes).
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs) {
inp.addEventListener("change", function() {
let targetLabel = document.getElementById(inp.dataset.target);
console.log(targetLabel);
let targetRadio = targetLabel.previousElementSibling;
targetRadio.value = inp.value;
targetLabel.innerHTML = inp.value;
targetRadio.checked = false;
//while there is a next target clear it
while (targetLabel.previousElementSibling.hasAttribute) {
targetLabel = document.getElementById(targetRadio.dataset.target);
targetRadio = targetLabel.previousSibling;
targetRadio.checked = false;
targetLabel.innerHTML = '';
}
});
}
I am having a Html generated using JQUery and its like
<p class="fieldChoices title" style="">
Choices:
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice1 cutsom_button deleteField"></p>
<div class="seperator"/>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice2 cutsom_button deleteField"></p>
<div class="seperator"/>
</p>
I am trying with on click of deleteChoice1 the corresponding Choice1 must be removed from the .fieldChoices using JQuery..
Also i may not know in JQuery whether i am clicking deleteChoice1 /deleteChoice2 ,,
so i dont know how to resolve it using JQuery..please suggest me....
$(".deleteField").click(function(){
$(this).prevAll("input:first").remove();
$(this).prevAll(".seperator").remove();
$(this).remove();
});
Though it'd be easier if you put each choice in a div.
Try the following instead:
<p class="fieldChoices title" style="">
Choices:
<fieldset>
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
<fieldset>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
</p>
$("deleteField").bind("click", function(){
$(this).parent().remove();
}
html:
<fieldset class="fieldChoices title">
<legend>Choices</legend>
<ul>
<li>
<input id="Choice1" value="option1" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
<li>
<input id="Choice2" value="option2" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
</ul>
</fieldset>
jquery:
$(".fieldChoices li").each(function() {
var choice = $(this);
$(".deleteChoice", this).click(function() {
choice.remove();
});
});