Develop Reference

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.

How to remove an OnClicked class when the parent div is collapsed?

I've accordion kind of menu strips. Initially all the menu will be collapsed. When a menu is clicked, that particular menu will expand for further options. When any other menu is clicked, the previous one will be collapsed. I'm able to do this. The problem goes here (after the code) :
HTML:
<script>
function showParagraph1(){
var x=document.getElementsByClassName("box1");
x[0].innerText="Hello JavaScript!";
}
function showParagraph2(){
var y=document.getElementsByClassName("box2");
y[0].innerText="Hello JavaScript!";
}
</script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph1()">
<div class="fillBlue"></div>
<div class="box1"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph2()">
<div class="fillBlue"></div>
<div class="box2"></div>
</div>
CSS
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}.box1{
width:100%;
height:auto;
background-color: #fff;
}
.box2{
width:100%;
height:auto;
background-color: #fff;
}.fillBlue{
height:10px;
background-color:blue;
}
JQuery
$(document).ready(function(){
$(".selectionPanel").slideUp();
$(".title").click(function(){
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
});
})
JS FIDDLE here
When a menu is expanded, it shows further options with a button called view. It has an onclick event attached with it to display a text.
When ever any other menu is clicked, the expanded div gets collapsed. Again when the collapsed div is opened, it displays the text message that was added with button click event.
I want to delete that particular class which displays text on button click as soon as it's parent div is collapsed.
To reproduce the problem in fiddle,
1:Click on First Option
2:Click View Button
3:Click Second Option
4:Click First Option
I don't want to display Hello Javascript here. It has to be displayed only when clicked on View Button
I tried this, but it didn't work
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp().removeClass(".selectionPanel");

You don't add any class, you just add text. So remove it with $("div[class^='box']").text('');.
$(document).ready(function() {
$(".selectionPanel").slideUp();
$(".title").click(function() {
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp(400, function() {
$("div[class^='box']").text('');
});
});
})
.title {
width: 100%;
height: auto;
background-color: #aaa;
padding: 5px 0px 5px 0px;
margin-top: 10px;
cursor: pointer;
}
.title p {
font-family: verdana;
text-align: center;
font-weight: bold;
font-size: 1.2em;
color: #000;
}
.selectionPanel {
height: auto;
width: 100%;
background-color: blue;
padding: 10px 0;
text-align: center;
display: none;
}
.box1 {
width: 100%;
height: auto;
background-color: #fff;
margin: 10px 0 -10px;
}
.box2 {
width: 100%;
height: auto;
background-color: #fff;
margin: 10px 0 -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showParagraph1() {
$('.box1').text('Hello JavaScript!');
}
function showParagraph2() {
$('.box2').text('Hello JavaScript!');
}
</script>
<div class="title">
<p>First Option</p>
</div>
<div class="selectionPanel">
Select the Duration
<select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select><input type="button" class="button" value="View" onclick="showParagraph1()">
<div class="box1"></div>
</div>
<div class="title">
<p>Second Option</p>
</div>
<div class="selectionPanel">
Select the Duration
<select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph2()">
<div class="box2"></div>
</div>

I changed your showParagraph you don't need 2 classes .box1 and .box2. You need only 1 class don't copy paste styles. if it's basicly the same thing ther's no point assigning some different name. Showparagraph now sends the parent div to the function and the function find the .box element inside it and puts the html. To show it or hide it it adds css display:block or display:none depending on the situation.
<script>
function showParagraph(el){
var el = $(el).find(".box");
el.css("display","block");
el.text("Hello JavaScript!");
}
$(document).ready(function(){
$(".selectionPanel").slideUp();
$(".title").click(function(){
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
$(".box").css("display", "none");
});
})
</script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph(this.parentNode)">
<div class="fillBlue"></div>
<div class="box"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph(this.parentNode)">
<div class="fillBlue"></div>
<div class="box"></div>
</div>
<style>
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}
.box{
width:100%;
height:auto;
background-color: #fff;
}
.fillBlue{
height:10px;
background-color:blue;
}
</style>

I've updated your fiddle to work like you want.
I didn't want to change your code too much but I've did a few changes.
First of all I think that it's better to have just one function for the showingParagraph action.
I've modified to receive the box to show as a param (and I'm using ID's, check also the css for the box styling)
function showParagraph(box){
var x = document.getElementById(box);
x.innerText = "Hello JavaScript!";
}
You could do the same for the innerText.
Then the jQuery part of the toggle looks like this now:
$(document).ready(function(){
$(".selectionPanel").slideUp();
$(".title").click(function() {
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
$('.box').each(function() {
$(this)[0].innerText = '';
})
})
});
You replace the innerText of each box for an empty string.
You can check the working fiddle here https://jsfiddle.net/3h8kLbak/8/

If this is the behavior you're looking for I'll explain what I've done.
updated to use.empty instead of .text('')
$(".title").click(function() {
$('.selectionPanel').not($(this).next('.selectionPanel')).slideUp();
$(this).next(".selectionPanel").slideToggle("slow");
$('input').closest('.selectionPanel').find('.box').empty();
});
$("input").click(function() {
if ($(this).val() === 'View') {
$(this).closest('.selectionPanel').find('.box').text('Hello JavaScript!');
}
})
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}.box1{
width:100%;
height:auto;
background-color: #fff;
}
.box2{
width:100%;
height:auto;
background-color: #fff;
}.fillBlue{
height:10px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View">
<div class="fillBlue"></div>
<div class="box box1"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View">
<div class="fillBlue"></div>
<div class="box box2"></div>
</div>
Fiddle
https://jsfiddle.net/Hastig/3h8kLbak/10/

Is it possible to show all <select> <option>s as a toggle?

This is a bit of a weird request, so I haven't seen any examples for it anywhere. Basically I want to 'unfold' a <select> so its options are visible, basically turning it into a toggle, of sorts. Here's my original <select>:
<span><input type="checkbox" className="onlyCheckbox" value={this.state.only}
onChange={this.handleOnlyChange.bind(this)} />
<label htmlFor="onlyIdentityBox">Only</label>
<select value={this.state.operator} onChange={this.handleOperatorChange.bind(this)} >
<option value="AND">AND</option>
<option value="OR">OR</option>
</select></span>
Ideally the solution would be css-only, but I'm not sure if that's possible (I've searched but not found any examples). Here's an image of what I'd like:
Is this doable?
edit: added context for the <select>'s surrounding elements.

To do this with a select box is rather..... odd. But sure it can be done. This should be enough to get you started:
.toggle{
font-size:18px;
height:1.4em;
overflow:hidden;
border:1px solid black;
border-radius:5px;
padding:0px;
box-sizing:border-box;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.toggle option{
display:inline-block;
float:left;
width:50%;
min-width:50px;
height:100%;
text-align:center;
box-sizing:border-box;
}
<select size='2' class='toggle'>
<option value="AND" selected>AND</option>
<option value="OR">OR</option>
</select>

If You can add some extra markup into your code then you can also try the following code:
Please check the fiddle for Demo. Fiddle Link
HTML
<select id="select-box">
<option value="AND" selected>AND</option>
<option value="OR">OR</option>
</select>
<div class="toggle-effect">
<label class="and">AND</label>
<label class="or">OR</label>
</div>
CSS
select {
margin-bottom: 40px;
}
.and {
border: 1px solid black;
background:red;
color: white;
}
.or {
border: 1px solid black;
background:blue;
color: white;
}
JS
$('.toggle-effect').on('click', '.and,.or', function(){
var textInLabel = $(this).text();
$('#select-box').val(textInLabel);
$('#select-box').trigger('change');
});

After some tinkering around at CodePen I came up with this, I added some JS to add the scroll effect.
var select = document.getElementById('select');
select.addEventListener('mouseup', function(e) {
e.preventDefault();
});
select.addEventListener('mousewheel', function(e) {
select.selectedIndex = select.selectedIndex + 1;
});
select {
overflow: hidden;
size: 2;
height: 18px;
}
option {
display: inline;
}
<select id="select" multiple>
<option>1</option>
<option>2</option>
</select>

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>

select tag with invisible option

I want my select tag to be completely invisible, but still clickable, because I have a colored div representing the area that is clickable, and once clicked, the select options will be displayed. I have got it to the point where it is invisible, except for the initial text that shows before you click the select tag. I just need make that text invisible. Here is the code I have:
css of the coloured div:
.residentPanel {
text-align: center;
line-height: 100px;
border: 1px solid #666;
background-color:#65A3EB;
width:100%;
height:100px;
margin-bottom:20px;
}
html:
<div class="residentPanel" style="background-color:#C991BE;" onclick="showSingleMeasurement()">
<select style="left:0; width:100%;height:100px;background-color:transparent; -webkit-appearance: none;" id="allMeasurementsDropDownTablet" onclick="selectClick($('#allMeasurementsDropDownTablet'), measurementClick);"></select>
</div>
Here is a JsFiddle
I just need the black text in the purple div to disappear. Thanks.

add an empty option
<div class="residentPanel" style="background-color:#C991BE;" onclick="showSingleMeasurement()">
<select style="left:0; width:100%;height:100px;background-color:transparent; -webkit-appearance:none;outline:none;" id="allMeasurementsDropDownTablet" onclick="selectClick($('#allMeasurementsDropDownTablet'), measurementClick);" value="">
<option disabled selected style="display:none;"></option>
<option>Durr</option>
<option>jgbfj</option>
<option>zzzzzz</option>
<option>aaaaaa</option>
<option>yyyyyy</option>
</select>
</div>
other
<div id="content">
<div id="centered"></div>
<select id="selectToCenter" onmousedown="this.value='';">
<option value="1">Durr</option>
<option value="2">jgbfj</option>
<option value="3">zzzzzz</option>
<option value="4">aaaaaa</option>
<option value="5">yyyyyy</option>
</select>
</div>
css
#content{
position:relative;
background-color:#C991BE;
height:100px;
width:100%;
z-index:1;
}
#centered{
position:absolute;
text-align: center;
font: bold 18pt calibri;
line-height:100px;
background:red;
width:100%;
height:100%;
z-index:-1;
}
#selectToCenter{
height:100px;
background-color:transparent;
-webkit-appearance:none;
outline:none;
width: 100%;
font: bold 18pt calibri;
text-indent: 5px;
color:transparent !important;
}
option{
color:black !important;
}
js
$('#selectToCenter').on('change', function () {
$('#centered').text($(this).find('option:selected').text());
});
JSFIDDLE

almost there:
color: transparent;