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 can I create a list where I can add and remove inputs via buttons?

I've an idea. For this I need a list like this draw:
So the main idea is to have a plus and a minus button. When a users presses the plus button, another input get's added. When pressing the minus button beside each input, the related input should be removed.
So I've startet with this here but I'm not very with it and the functionality is not given yet. How can I deal with this a smart way? Is there a problem with the id's? I mean I could copy a row or insert it (with JS) but how can I get the values later of all inputs in one map (with JS) for example? A lot of questions..
.out-task {
display: flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background: red;
}
.button {
width: 30px;
height: 30px;
display: block;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.add-task-button {
background: green;
}
<div class="wrapper">
<label>Tasks</label>
<div id="tasks-wrapper">
<div class="out-task">
<input type="text" id="task" name="task" value="">
<span class="delete-task-button button">-</span>
</div>
</div>
<span class="add-task-button button">+</span>
</div>
Thanks for helping me out!!!

As I have criticized everyone, I let you do the same on my code:
const ListTasks = document.querySelector('#wrapper > div')
, PosInsertTask = document.querySelector('#wrapper > div > span.add-task-button')
, taskWrapper = document.querySelector('#template > div')
;
ListTasks.onclick=e=>
{
if (e.target.classList.contains('add-task-button'))
{
let newTask = taskWrapper.cloneNode(true)
ListTasks.insertBefore(newTask, PosInsertTask)
}
else if (e.target.classList.contains('delete-task-button'))
{
ListTasks.removeChild(e.target.closest('.out-task'))
}
}
.out-task {
display : flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background : red;
}
.button {
width : 30px;
height : 30px;
display : block;
border-radius : 50%;
color : white;
display : flex;
justify-content: center;
align-items : center;
cursor : pointer;
font-weight : bold;
}
#wrapper { display: inline-block; border: 1px solid grey; padding:.8em;}
#wrapper h4 { text-align: center; }
.add-task-button {
background: green;
margin: auto;
}
#template { display: none;}
<div id="wrapper">
<h4>Tasks</h4>
<div>
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
<span class="add-task-button button">+</span>
</div>
</div>
<div id="template">
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
</div>

How to show another div when clicking on a div?

Good afternoon ,
I know this question has been asked a lot of times here, but all the answers there are not working for the problem I have.
I have a div called .title3 . When the user clicks it I want another div called .Content3 to be shown . But unfortunatelly it doesn't work the way I want to.
Here is a part of my html code where I found this problem :
<body style="background-color:#171717">
<div class="pseudo3">
<div class="one3">
<div class="Content3">
<p class="close">X</p>
<form action="order.php">
<input type="text" value="First & Last Name">
<input type="email" value="Your e-mail">
<input type="text" value="Your phone number">
<textarea>Write your feedback here</textarea>
<button>Send</button>
</form>
</div>
<div onmouseclick="showDiv()" class="title3">
FEEDBACK
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
function showDiv() {
var x = document.getElementsByClassName("title3");
if ( x.click === true ){
document.getElementsByClassName("Content3").style.display = "block";
}
}
</script>
</body>
CSS:
/* The Form Style */
form {
width: 100%;
height: 100%;
}
form input {
width: 100%;
height: 35px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
padding: 12px;
border: 0;
outline: none;
border-top: 0.15px solid #262323;
border-left: 0.15px solid #262323;
border-right: 0.15px solid #262323;
}
form textarea {
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
padding: 12px;
border: 0;
outline: none;
border-top: 0.15px solid #262323;
border-left: 0.15px solid #262323;
border-right: 0.15px solid #262323;
}
form button {
width: 100%;
height: 45px;
position: relative;
top: -3px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
border: 0.15px solid #262323;
outline: none;
font-size: 20px;
}
input:focus,
textarea:focus,
button:focus{
background-color: #212020;
border-top: 0.15px solid #1f1616;
border-left: 0.15px solid #1f1616;
border-right: 0.15px solid #1f1616;
}
/* Content3 style */
.Content3 {
width: 300px;
height: 350px;
position: absolute;
z-index: 2;
display:none;
}
/* one3 style */
.one3 {
width: 300px;
height: 350px;
transition: 0.3s ease;
position: relative;
background-color: #141414;
}
/* pseudo3 style */
.pseudo3 {
width: 320px;
padding: 10px;
border-top: 2px solid #b95e1c;
border-bottom: 2px solid #ad7145;
background-image:
linear-gradient(#b95e1c, #ad7145),
linear-gradient(#b95e1c, #ad7145);
background-size: 2px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
/* title3 style */
.one3 .title3 {
padding: 30px;
font-size: 24px;
color: #8b8b8b;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* close style */
.close{
color: #8b8b8b;
font-size: 24px;
position:absolute;
left:-11px;
top:-62px;
z-index:3;
border-top: 0.5px solid #1f1616;
border-left: 0.5px solid #1f1616;
border-right: 0.5px solid #1f1616;
border-bottom: 0.5px solid #1f1616;
padding:10px 17px;
background-color:#212121;
transition: 0.2s ease-in-out;
}
.close:hover{
background-color: #8b8b8b;
color:#212121;
cursor:pointer;
transition: 0.2s ease-in-out;
}
JavaScript:
function showDiv() {
var x = document.getElementsByClassName("title3");
if ( x.click === true ){
document.getElementsByClassName("Content3").style.display = "block";
}
}
There are no error messages, but when I click my .title3 div it's not showing the div with class .Content3

You have many problems in your code. I will try to cover most of them
You use onmouseclick. That is not a valid javascript event. Use onclick.
You are trying to assign to variable x the HTML element with class title3. Here are 2 problems:
2.1. You do not need to assign the element you just clicked on to a variable inside the click function. You already have that element with event.target
2.2. By using getElementsByClassName you get a HTML Collection not a single element. ( see the plural Elements word ) You can get it using querySelector or by adding an id to it and use getElementById ( see the singular Element ). But again, you do not need to retrive it like that. You can use the event.target. As you click on it.
if ( x.click === true ){ . Why you need to check if the element is clicked, when the entire function is called only when that element is clicked ? Redundant check and not correct.
here again. See point 2.2
do not name your HTML attributes with capital letters. use content3
Do not import jquery, as you do not need it.
Check code below
function showDiv() {
document.querySelector(".Content3").style.display = "block";
}
.Content3 {
display:none
}
<div class="pseudo3">
<div class="one3">
<div class="Content3">
<p class="close">X</p>
<form action="order.php">
<input type="text" value="First & Last Name">
<input type="email" value="Your e-mail">
<input type="text" value="Your phone number">
<textarea>Write your feedback here</textarea>
<button>Send</button>
</form>
</div>
<div onclick="showDiv()" class="title3">
FEEDBACK
</div>
</div>
</div>
Useful links:
onclick event
getElementsByClassName
querySelector
event.target

You dont need jQuery to do that, you can also delete your onmouseover and use just this:
<script>
//add listener for click on your .title3
document.getElementsByClassName("title3")[0].addEventListener('click', function(e){
//prevent default action if any (dont need that in this case, but useful, if .title3 would be <a> tag)
e.preventDefault();
//set style
document.getElementsByClassName("Content3")[0].style.display = "block";
});
</script>

Can you use data property for this topic.
<div class="titles">
<button data-id="1">open 1</button>
<button data-id="2">open 2</button>
<button data-id="3">open 3</button>
</div>
<div class="contents">
<p data-id="1">context</p>
<p data-id="2">context</p>
<p data-id="3">context</p>
</div>
When any button clicked, take data-id and do anything inside of contents div with data-id. If you cannot understand I can send any example for this.

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>

Breaking nicely into an additional div without using extensive javascript?

I have the following HTML markup:
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div id="Level1Controls">
<div class="separated">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
</div>
<div id="Level2Controls">
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
</div>
CSS (w/ latest jQueryUI for major styling)
#RightPaneContent
{
overflow: hidden;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
}
#PlanViewControls > div
{
min-height: 20px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 5px;
}
.component-slider
{
width: 100px;
margin-left: 5px;
margin-top: 3px;
}
#PlanViewControls label
{
display: block;
padding-left: 15px;
text-indent: -15px;
float: left;
}
#PlanViewControls input
{
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
}
#PlanViewControls div.separator
{
padding-top: 4px;
}
.marginedTop
{
margin-top: 3px;
}
#ExportLabel
{
padding-top: 1px;
}
#PlanViewControls
{
min-width: 700px;
}
#ExportLabel:hover
{
cursor: pointer;
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
I am really unhappy with this solution because on wide displays the second level of controls looks unnatural -- there is enough space to hold them all in one level.
The solution I currently have in my head consists of:
Measure the available width of the space I would like to take up.
Measure the width of each control I have.
Place as many controls as I can on the first line.
Append a second level if I run out of space.
Obviously it doesn't make sense to collapse to just 1 item per row -- I would be specifiying a min-width for my first level controls.
Is this the proper way to go about doing this? Or is there an easy way to express this using CSS/HTML?
Just as a visual helper I've attached below what my page looks like on a landscape monitor vs a portrait monitor.

Hm, I would use pure CSS for that:
<div id="controls">
<div> "Separated" </div>
<div> another control </div>
<div> and one with an icon </div>
...
</div>
#controls {
width: 100%;
min-width: 10em; /* or whatever */
/* implicit height: auto; */
overflow: hidden; /* to hide the leftmost borders */
}
#controls > div {
display: inline-block;
border-left: 1px solid blue;
padding: 1em 0;
margin: 1em -1px; /* move the borders 1px into the off */
}
This should give a scalable toolbar, and there is no need for different level-divs.