Develop Reference

get text inside element, if element contains select get selected option

Post Edited: Using MutationObserver instead of DOMSubtreeModified
I have a div where I am using .each to go through every label and get their text, but I'd like to add an additional ifelse statement where if the label includes a select child, add the selected option to the text string
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
var target = document.querySelector('#droppable')
var observer = new MutationObserver(function(mutations) {
var str = "";
$('#droppable label').each(function(){
str += $(this).text() + "<br>";
document.getElementById("inside_drop_zone").innerHTML = str
});
})
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label><select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label><select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
Desired Output
label OR label : selected option
ONE + ":" + week 1
THREE
TWO + ":" + week 3
I'm pretty new to JQuery so thank you for any help/tips!

Look for lines marked // changed
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
$("body").on('DOMSubtreeModified', "#droppable", function() {
var str = "";
$('#droppable label').each(function() {
const txt = $(this).text() // changed
const val = $(this).parent().find("select").children("option:selected").val() // changed - the main idea is to get parent() of $(this) and then search for <select>
str += txt + (val ? ":" + val : "") + "<br>"; // changed
})
document.getElementById("inside_drop_zone").innerHTML = str
});
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label>
<select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label>
<select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>

Sortable JS delete item using button click

I'm trying to create a little Sortable JS project where I can clone items from the left side into the right, and can delete items from the right side. I tried creating a button where on click it deletes the parent list item but it's not working properly
I was wondering if someone could look at my codepen (code also below) and see what I'm doing incorrectly? The delete buttons only work sometimes??? [If you delete an item on the right side, once you drag any more in they can no longer be deleted!]
Ideally I'd like to have NO delete button on the left side and only have the ability to delete once its been dragged on the right side but I'm not sure how to implement this.
Please advise, thank you!!
$("#sortable1").sortable({
connectWith: ".builder-stage",
helper: function(event, el) {
copyHelper = el.clone().insertAfter(el);
return el.clone();
},
stop: function() {
copyHelper && copyHelper.remove();
}
});
$(".builder-stage").sortable({
receive: function(event, ui) {
copyHelper = null;
}
});
$(".delete").click(function() {
$(this).parent().remove();
});
.widgets-panel {
float: left;
height: 500px;
width: 300px;
border-right: 1px solid #000;
padding: 15px;
.rows-widget-list {
list-style: none;
padding: 0;
margin: 0;
> li {
display: block;
padding: 10px 15px;
border: 1px solid #ddd;
margin-bottom: 5px;
background-color: #fff;
}
}
.ui-sortable-placeholder {
position: absolute;
}
}
.stage {
padding: 15px;
float: left;
width: calc(100% - 300px);
.connectedSortable {
list-style: none;
padding: 0;
margin: 0;
> li {
display: block;
padding: 10px 15px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
}
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pagebuilder clearfix">
<div class="widgets-panel">
<ul id="sortable1" class="connectedSortable rows-widget-list">
<li class="ib-row row-widget-list-item">
<select>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
<button class="delete">Delete</button>
</li>
<li class="ib-row row-widget-list-item">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button class="delete">Delete</button>
</li>
</ul>
</div>
<div class="stage">
<ul id="sortable2" class="builder-stage connectedSortable">
<li class="ui-state-default">An item
<button class="delete">Delete</button>
</li>
</ul>
</div>
</div>

Instead of:
$(".delete").click(function() {
$(this).parent().remove();
});
Put:
$("#sortable2").on('click', '.delete', function() {
$(this).parent().remove();
});
Since you are dynamically dropping html elements you need to dynamically attach events to them.

Trouble adding total value while converting string to int

I have two select fields that ask the user two different questions and adds the overall value to the final total depending on the selected value. I'm not fully understanding why the final total is saying $NaN USD when I select the second select field first but if I select the first select field first then it doesn't display $NaN USD.
var total;
$('.form-contro').on('change', function() {
var get = $('#form-contro option:selected').val();
total = Number(get);
$('.text-center h2 span').html(total + " USD");
});
$('.form-contr').on('change', function() {
var get = $('#form-contr option:selected').val();
if (get === 'no') {
total = 1000;
} else if (get === 'yes') {
total = total + 30;
}
$('.text-center h2 span').html(total + " USD");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="wrapper" style="margin-top: 20px; font-size: 12px; color: #888; font-family: 'Raleway', sans-serif;" for="states">Number of items:</label>
<select class="form-contro" id="form-contro" style="width: 320px; height: 40px; text-indent: 10px; display: block; margin: 0 auto; border-radius: 4px; border-style: solid; border-color: #343434;">
<option value="90" id="items">1 Item</option>
<option value="95.50" id="items">2 Items</option>
<option value="100" id="items">3 Items</option>
<option value="105" id="items">4 Item</option>
</select>
<label class="wrapper" style="margin-top: 20px; font-size: 12px; color: #888; font-family: 'Raleway', sans-serif;" for="states">Will you be flying?</label>
<select class="form-contr" id="form-contr" style="width: 320px; height: 40px; text-indent: 10px; display: block; margin: 0 auto; border-radius: 4px; border-style: solid; border-color: #343434;">
<option value="no" id="items">No</option>
<option value="yes" id="items">Yes</option>
</select>
<div class="text-center" style="clear: both;">
<h2 style="margin-top: 40px;">Total amount $<span id="new_text">90 USD</span></h2>
</div>
I'm fairly new to Javascript so any help is appreciated since I've been working on this problem awhile.

You didn't give total an initial value, so at the top, make the value of total:
var total = 0;
The reason you don't get NaN the other way around, is because you used Number(get), which gives it a default value of 0 if null.

Change Border Color of Div Based on Selection With CSS and JavaScript

I'm trying to create a JavaScript function that allows us to change the border color of a div based on our selection. If the user selects Div 1 and Gray 1, the border-color of Div 1 will change to color:#333333; after hitting Make Change.
HTML:
<div id="div_6">
Div Selector:
<!-- Place Div Select Here -->
<select>
<option>Div 1</option>
<option>Div 2</option>
<option>Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select>
<option>Gray 1</option>
<option>Gray 2</option>
<option>Gray 3</option>
</select>
<!-- Place "Change Color" Button Here -->
<button>Change Color</button>
</div>
CSS:
/*color selectors*/
#Gray1 {
color:#333333;
}
#Gray2 {
color:#777777;
}
#Gray3 {
color:#CCCCCC;
}
So the function will need to access these ID's. Please see the entire code / website here:
http://blog.drawyourpets.com/
I'm lost as to where to even start when creating this function. Do I need to assign to options various classes in the HTML? Thank you!
EDIT Of course the script will go in the <script> section of the <head>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This is a simple CSS, HTML, and JS Test"/>
<title>WebToMed Website Developer Test</title>
<style>
/* Add all CSS enteries here */
#div_1 {
background: red;
display: table-cell;
text-align: left;
width: 300px;
height: 50px;
}
#div_2 {
background: green;
display: table-cell;
text-align: center;
height: 50px;
}
#div_3 {
background: blue;
display: table-cell;
text-align: right;
width: 350px;
color: #ffffff;
font-weight: bold;
text-decoration: underline;
height: 50px;
}
#div_4 {
background: yellow;
display: flex;
text-align: center;
height: 300px;
}
#div_5 {
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
}
#div_6 {
border: 3px solid black;
margin-top: 10px;
padding: 20px;
}
.container {
display: table;
width: 100%;
}
/*color selectors*/
#Gray1 {
color:#333333;
}
#Gray2 {
color:#777777;
}
#Gray3 {
color:#CCCCCC;
}
</style>
<script>
/* Add any JavaScript here */
</script>
</head>
<body>

function change() {
$('#' + $('#select-div').val()).css('border', '3px solid ' + $('#select-color').val());
}
#div_1 {
background: red;
display: table-cell;
text-align: left;
width: 300px;
height: 50px;
}
#div_2 {
background: green;
display: table-cell;
text-align: center;
height: 50px;
}
#div_3 {
background: blue;
display: table-cell;
text-align: right;
width: 350px;
color: #ffffff;
font-weight: bold;
text-decoration: underline;
height: 50px;
}
#div_4 {
background: yellow;
display: flex;
text-align: center;
height: 300px;
}
#div_5 {
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
}
#div_6 {
border: 3px solid black;
margin-top: 10px;
padding: 20px;
}
.container {
display: table;
width: 100%;
}
/*color selectors*/
#Gray1 {
color: #333333;
}
#Gray2 {
color: #777777;
}
#Gray3 {
color: #CCCCCC;
}
.output {
margin-top: 20px;
}
.output > div {
display: inline-block;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #000;
padding: 20px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_6">
Div Selector:
<select id="select-div">
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
<option value="div3">Div 3</option>
</select>
<br /><br /> Color Selector:
<select id="select-color">
<option value="#777">Gray #555</option>
<option value="#999">Gray #999</option>
<option value="#AAA">Gray #BBB</option>
</select>
<button onClick="change();">Change Color</button>
<div class="output">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
</div>

Okay i will try to explain.
First you should define a function thats acts as Eventhandler for an event. There are multiple events that are fired by DOM-Elements like button, divs, etc.
For your case we want to listen for the click event of the button. (If a user clicks on the button, a method get executed)
If you work with jQuery this can easly done:
$('.submit').on('click', () => {
})
Notice: ive added a "submit"-Class to your Markup:
<button class="submit">Change Color</button>
On the next step we want the Values that the user selected via the selection. With jQuery this can done like so:
var idOfDiv = $('.divSelect option:selected').val();
var selectedGrayClass = $('.colorSelect option:selected').val();
Notice: ive added a "divSelect" and "colorSelect"-Classes to your Markup:
<select class="divSelect">
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
<option value="div3">Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select class="colorSelect">
<option value="gray1">Gray 1</option>
<option value="gray2">Gray 2</option>
<option value="gray3">Gray 3</option>
</select>
Notice: the values defined on the colorSelect selection should reference to some css classes:
.gray1 {border:1px solid gray}
.gray2 {border:1px solid #222}
.gray3 {border:1px solid #ccc}
On the final step we apply the data we've read from our selections:
$('#'+idOfDiv).removeClass().addClass(selectedGrayClass);
Notice: removeClass is there to remove a Class that may added before.
Complete solution:
https://jsfiddle.net/yt2u8z3w/

1.) Assign values to your options, assign IDs to your selects in your HTML:
<div id="div_6">
Div Selector:
<!-- Place Div Select Here -->
<select id="div">
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
<option value="div3">Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select id="colors">
<option value="gray1">Gray 1</option>
<option value="gray2">Gray 2</option>
<option value="gray3">Gray 3</option>
</select>
2.) Create your JavaScript function within your <script> </script> tags. Declare your variables:
<script>
/* Add any JavaScript here */
function changecolor(){
/*gets selected value within select with ID "div"*/
var selectedvalue = document.getElementById("div").value;
/*gets selected value within select with ID "colors"*/
var selectedcolor = document.getElementById("colors").value;
3.) Create If, Else If statements to declare border styles based on selection:
if(selectedvalue == "div1" && selectedcolor == "gray1"){
document.getElementById("div_1").style.borderColor="#333333";
document.getElementById("div_1").style.borderWidth ="3px";
document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" && selectedcolor == "gray1"){
document.getElementById("div_2").style.borderColor="#333333";
document.getElementById("div_2").style.borderWidth ="3px";
document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" && selectedcolor == "gray1"){
document.getElementById("div_3").style.borderColor="#333333";
document.getElementById("div_3").style.borderWidth ="3px";
document.getElementById("div_3").style.borderStyle ="solid";
}
else if(selectedvalue == "div1" && selectedcolor == "gray2"){
document.getElementById("div_1").style.borderColor="#777777";
document.getElementById("div_1").style.borderWidth ="3px";
document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" && selectedcolor == "gray2"){
document.getElementById("div_2").style.borderColor="#777777";
document.getElementById("div_2").style.borderWidth ="3px";
document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" && selectedcolor == "gray2"){
document.getElementById("div_3").style.borderColor="#777777";
document.getElementById("div_3").style.borderWidth ="3px";
document.getElementById("div_3").style.borderStyle ="solid";
}
else if(selectedvalue == "div1" && selectedcolor == "gray3"){
document.getElementById("div_1").style.borderColor="#CCCCCC";
document.getElementById("div_1").style.borderWidth ="3px";
document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" && selectedcolor == "gray3"){
document.getElementById("div_2").style.borderColor="#CCCCCC";
document.getElementById("div_2").style.borderWidth ="3px";
document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" && selectedcolor == "gray3"){
document.getElementById("div_3").style.borderColor="#CCCCCC";
document.getElementById("div_3").style.borderWidth ="3px";
document.getElementById("div_3").style.borderStyle ="solid";
}
};
</script>
There's no need to declare the styles for your ID's with CSS. You can remove the lines after /*color selectors*/ within your <style> </style> tags. We are doing "inline styles" with JavaScript when we do this: .style.borderColor="#333333";. JavaScript styles, by the way, are usually similar to CSS styles but appear in camelCase. So font-weight in CSS = fontWeight in JavaScript.

selected element,
document.querySelector('my_element_tag').onclick = function(){
document.querySelector('my_element_tag_for_change_color').style.border = "1px solid #333";
};
Or if you have many element
document.querySelectorAll('my_element_tag').forEach(function(element){
element.onclick = function(){
element.style.border = "1px solid #333";
};
});

add a delete icon in front of each row in list in jquery

I have a list control and at run time when I bind data to the control I want to append a delete icon or a button to each row in jquery, so that I can delete a row if I want to. Here is the code that I am using to bind data to the control.
$(response.aaData).each(function (index, val) {
$("#multiselectSubCat")
.append($('<option></option>').val(val.SubCategoryId).html(val.SubCategoryName));
});
Rendered
<select name="from" id="multiselectSubCat" multiple="multiple" style="width: 300px; top: 100px">
<option value="9">Category1</option>
<option value="10">Category2</option>
<option value="11">Category3</option>
<option value="12">Category4</option>
<option value="13">Category5</option>
<option value="22">Category6</option>
</select>

I want to know whether you want input button or image to show user that you can delete particular record?
I have made an example where I am adding background.
.select-box {
height: 400px;
}
.select-box option {
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat;
padding-left: 25px;
cursor: pointer;
}
.select-box option:hover {
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat #eee;
}
<select name="from" id="multiselectSubCat" multiple="multiple" class="select-box" style="width: 300px; top: 100px">
<option value="9">Category1</option>
<option value="10">Category2</option>
<option value="11">Category3</option>
<option value="12">Category4</option>
<option value="13">Category5</option>
<option value="22">Category6</option>
</select>

Building on this
How can I use <ul> list instead of <select> dropdown for the languages switcher?
have a go at this:
var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideUp(200);
} else {
nav.addClass('active');
selection.stop().slideDown(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
select.removeClass('active');
$(this).addClass('active');
alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});
$(".del").on("click",function(e) {
e.preventDefault();
$(this).parent().remove();
});
h2 {
width: 200px;
background: #222;
color: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol
{
list-style-type: none;
}
ol.select {
display: none;
}
ol.select > li {
width: 200px;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol.select > li:hover {
background: #aaa;
}
.select a { text-decoration:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
<li data-value="en"><a class="del" href="#">X</a> English</li>
<li data-value="de"><a class="del" href="#">X</a> Deutsch</li>
</ol>

U did the right thing just little changes required
<a href="http://jsfiddle.net/ajaymalhotra15/2tmntdft/" > click here to see code </a>