We Keep Coding

How to create element onclick which removes the element's parent node?

I'm trying to make a box copier that creates boxes which each contain a button to delete itself. Each box is a duplicate of a hidden template box, and each has an id starting at box1:
This is what I have so far:
let boxcount = 0;
function removebox() {
this.parentNode.remove();
}
function addbox() {
var container = document.getElementById("container"),
box = document.getElementById("boxoriginal");
var boxcopy = box.cloneNode(true);
boxcount += 1;
boxcopy.id = "box" + boxcount;
container.appendChild(boxcopy);
var remover = document.createElement("DIV");
remover.innerHTML = "x";
remover.onclick = removebox;
document.getElementById(boxid).appendChild(remover);
}
The problem is that if I click on the X in box1 for instance, it removes the last box just added, rather than box1. I've tried something similar using EventListener but with the same result.
I'm brand new to JS, so I can only guess that I'm misunderstanding how this works.

Maybe not a perfect solution for what you are trying to achieve, but you might want to create a structure more like:
let doc, bod, M, I, SimpleBoxMaker; // for use on other loads
addEventListener('load', ()=>{
doc = document; bod = doc.body; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
SimpleBoxMaker = function(appendTo = bod){
this.container = M('div');
this.addBox = contentNode=>{
const container = this.container, box = M('div'), x_div = M('div');
box.className = 'box_div'; x_div.className = 'x_div'; x_div.innerHTML = '×';
box.appendChild(x_div);
if(contentNode)box.appendChild(contentNode);
x_div.onclick = ()=>{
box.remove();
}
container.appendChild(box);
return this;
}
appendTo.appendChild(this.container);
}
// below code can be put on a separate page using a `load` Event (besides // end load line)
const bigBox = new SimpleBoxMaker, addBox = I('add_box');
addBox.onclick = ()=>{
const div = M('div');
div.textContent = 'Before adding this node there were '+bigBox.container.children.length+' children in the container';
bigBox.addBox(div);
}
}); // end load
*{
box-sizing:border-box:
}
.box_div{
min-height:30px; border:1px solid #000; margin-top:2px;
}
.x_div{
cursor:pointer; display:flex; justify-content:center; align-items:center; width:30px; height:30px; background:#900; color:#fff; font:bold 24px san-serif; text-align:center; float:right;
}
<button id='add_box'>Add Box</div>

Styling Elements that have been appended using jquery

I have div elements that are appended on a parent div. Depending on the screen size, the div elements should resize but my efforts to do so using jquery .css() are failing all through. Kindly help. Below is a sample of my code
var len = data.length; //a number comes here
var i;
for(i=1;i<len+1;i++){
$(".app-body").append(
"<div class='list-box' onclick='OpenHymn("+ i +")'>" +
"<div class='circle-text'><div class='hym_num'>" + i + "</div></div>" +
"</div>");
}
//calling the function that should resize the divs
GridBoxes();
function GridBoxes(){
var width=window.innerWidth;
var divisible=parseInt(width-40);
var size=divisible/4;
var boxes=$('.list-box');
boxes.css("width",size+"px");
boxes.css("height",size+"px");
}

Put the function inside $(window).resize() for it to fire everytime the window is resized
Code:
$(window).resize(function() {
GridBoxes();
})
Example
You should really use media query's for this kind of problem.

try this
window.addEventListener("resize", GridBoxes);//called on window resize
var len = 4; //changed to a number here for testing
var i;
for(i=1;i<len+1;i++){
$(".app-body").append(
"<div class='list-box' onclick='OpenHymn("+ i +")'>" +
"<div class='circle-text'><div class='hym_num'>" + i + "</div></div>" +
"</div>");
}
//calling the function that should resize the divs
//GridBoxes();
function GridBoxes(){
var width=window.innerWidth;
var divisible=parseInt(width-40);
var size=divisible/4;
var boxes=$('.list-box');
for(var b=0;b<boxes.length;b++){
boxes[b].css("width",size+"px");
boxes[b].css("height",size+"px");
}
}
.list-box{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-body"></div>

I want to move items with jquery but html structure is conflicting on ie8

I need help; If last Menu in first column bigger size than all li items in second column; I want to move last Menu in first column to top of second column then remove the cloned menu.
It is working on chrome but not working on ie8. What is the solution? If you have better idea for this work, please tell me..
Thanks..
<style>
.col3 { width:33.33333333333333%; float:left; }
</style>
$(document).ready(function () {
col1="<div class=\"col3\"><ul><li><h3>Menu1</h3></li><li>Child1</li></ul><ul><li><h3>Menu2</h3></li><li>Child1</li><li>Child2</li><li>Child3</li><li>Child4</li><li>Child5</li></ul></div>"
col2="<div class=\"col3\"><ul><li><h3>Menu3</h3></li><li>Child1</li><li>Child2</li><li>Child3</li><li>Child3</li></ul></div>"
tmp=col1+col2;
a1 = $(tmp)[0].innerHTML;
a2 = $(tmp)[0];
var LastUl = $(a2).children('ul:last-child')[0].outerHTML;
var LastLiSize = $(LastUl).children('li').size();
var b1 = $(tmp)[1].innerHTML;
var b2 = $(tmp)[1];
col2LiSize = $(b1).children('li').size();
if (LastLiSize > col2LiSize) {
var lastUl = a1.lastIndexOf("<ul>");
var clone = a1.substring(lastUl);
var col1tmp = a1.replace(clone, "");
var col2tmp = $(col2);
col2tmp.prepend($(clone));
result=' <div class=\"col3\">' + col1tmp + '</div> <div class=\"col3\">' + $(col2tmp).html() + '</div>';
$('body').append('<div style=\"clear:both;\">'+result+'</div>');
}
else {
$('body').append('<div style=\"clear:both;\">'+tmp+'</div>');
}
});

dropdown is in middle of page, should open list according to position

I have a dropdown which is in the middle of the page. It always opens the list downwards, as it should be. Now, we have to implement it in a way that whenever the browser screen size is changed, & the dropdown box does not have enough space to open the list, it should open the list upwards.
Please let me know, if more details are required.
code :
HTML For DropDown List/Picker :
<div id="pick-container" class="wGridPx_30 hPrefixPx_2 hSuffixPx_2 outer ">
<label id="pick-label" class="input hPrefixPx_1">
<span id="pick-guide">Start typing EID, first or last name</span>
<input id="peoplepick" type="text" class="wGridPx_29" />
</label>
</div>
javascript :
if( $("div#people-picker-container").length == 0 ) {
$("#peoplepick").parent().append("<div id='people-picker-container' class='ui-picker-container'></div>");
//Set the desired height for dropdown
$("#people-picker-container").css({'max-height':'260px'});
}
Adding the list :
var people = $.parseJSON(data.d);
$("#people-picker-container").html(null);
$.each(people, function (index, item) {
//For image handler (ashx) please contact 'acn.ppl.plumbers' team to get code and access rights
var person = "<div class='ui-person-item'><input type='hidden' name='eid' value=" + item.EnterpriseId + " /> " +
"<div class='ui-person-img'><img src='/services/PhotoProvider.ashx?id=" + item.EnterpriseId + "'/></div>" +
"<div class='ui-person-info'>" +
"<span>" + item.DisplayName + "</span>" +
"<div class='ui-person-desc'>" + item.DisplayText + "</div>" +
"</div>" +
"</div>";
$("#people-picker-container").append(person);
CSS :
.ui-picker-container{
position:absolute;
border:1px solid #afafaf;
background-color:#fff;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
z-index:100;}
.ui-picker-dropup{
bottom: 18%;
}
.ie7 .ui-picker-container {
margin-top:21px;
margin-left:-240px;
}
.ui-person-item{
width:auto;
position:relative;
min-height:48px;
margin:8px 0;
background-color:#fff;
word-wrap:break-word;
cursor:pointer;
z-index:110;
}
.ui-person-img{
width:48px;
height:48px;
overflow:hidden;
position:absolute;
left:10px;
}
.ui-person-img img{
width:100%;
}
.ui-person-info{
min-width:100px;
position:absolute;
left:80px;
width:69%;
}
.ui-person-desc{
font:1em Arial;
color:#808080;
}
.hidden{
display:none;
}
.ui-person-info span {
color:#000;
font-style:normal;
left:auto;
height:auto;
top:auto;
z-index:auto;
cursor:pointer;
}
I am trying to add class - .ui-picker-dropup when screen size changes, but this is not working with all the scrren sizes, & not able to figure out how to dynamically calulate the bottom %. is there any other way to do this?
I was using this way, but this is absolutely incorrect :
//Calulate the size of scrren
var screenHight = $(window).height();
var screenWidth = $(window).width();
var pickerPosition = { left: 0, top: 0 };
var picker = document.getElementById('pick-container');
pickerPosition = picker.getBoundingClientRect();
var xPicker = pickerPosition.left;
var ypicker = pickerPosition.top;
alert(" ypicker " + ypicker);
if(ypicker != 288){
$("#people-picker-container" ).addClass( "ui-picker-dropup");}

A designer friend of mine asked me this question for something she was working on and pointed me to your unanswered question. I'll summarize the solution I gave to her at this codepen..
I wrote the solution as a basic jQuery plugin that will add a class to the element when it approaches within a buffered amount of the bottom of the page or beyond. This should provide the flexibility to change the direction of the dropdown list when the element has a special class.
USAGE
$('#target').bottomFeeder();
// or with options
$('#target').bottomFeeder({
buffer: 100, // buffer is the distance from the bottom of the page that the class is added
className: 'bottom' // class name to be added
});
PLUGIN
$.fn.bottomFeeder = (function(){
var lastScrollTop = $(window).scrollTop(),
delta = 5, // every 5px scroll
winH = 0,
observees = [];
var checkPosition = function(obj){
var el = $(obj.el),
top = el.offset().top;
if((top + obj.config.buffer) > (lastScrollTop + winH))
el.addClass(obj.config.className);
else
el.removeClass(obj.config.className);
};
$(window).on('scroll', function(){
// nothing to do
if(observees.length === 0) return;
var st = $(this).scrollTop();
// scroll was less than the delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// update shared variables
winH = $(window).outerHeight();
lastScrollTop = st;
for(var i = 0; i < observees.length; i++){
checkPosition(observees[i]);
}
});
return function(config){
config = config || { buffer: 50, className: 'bottom' };
observees.push({ el: this, config: config });
};
})();

javascript onclick, anonymous function

I am a beginning javascript programmer. I am trying to create something similar to Lightbox 2, but much simpler. The only reason why I want to do it from scratch on my own is so that I can learn. However, I've been stuck on the last critical part where it displays the image. I believe the problem lies where I try to use onclick with assignment to an anonymous function:elem[i].onclick = function (){liteBoxFocus(imgSource,imgTitle); return false;};
. If you run my code and try clicking on the google logo it'll bring up the yahoo logo and title instead of google's logo and title. However when you click on the yahoo logo it works fine so it seems that the anonymous function only holds for the last loop. Thanks in advance!!!
I have placed the entire CSS/JS/XHTML in one page for your convenience.
<html>
<head>
<title>Erik's Script</title>
<style type="text/css">
#liteBoxBg, #liteBox {
display: none;
}
#liteBoxBg {
background-color: #000000;
height: 100%;
width:100%;
margin:0px;
position: fixed;
left:0px;
top: 0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 40;
}
#liteBox {
background-color:#fff;
padding: 10px;
position:absolute;
top:10%;
border: 1px solid #ccc;
width:auto;
text-align:center;
z-index: 50;
}
</style>
<script type="text/javascript">
window.onload = start;
function start(){
var imgTitle = "No title";
var imgSource;
var elem = document.getElementsByTagName("a");
var i;
//Dynamically insert the DIV's to produce effect
var newDiv = document.createElement('div');
newDiv.setAttribute("id", "liteBox");
document.getElementsByTagName("body")[0].appendChild(newDiv);
newDiv = document.createElement('div');
newDiv.setAttribute("id", "liteBoxBg");
document.getElementsByTagName("body")[0].appendChild(newDiv);
//Check those anchors with rel=litebox
for(i = 0;i < elem.length;i++){
if(elem[i].rel == "litebox"){
imgSource = elem[i].href.toString();
imgTitle = elem[i].title;
elem[i].childNodes[0].style.border="0px solid #fff";
elem[i].onclick = function (){liteBoxFocus(imgSource,imgTitle); return false;};
}
}
//When foreground is clicked, close lite box
document.getElementById("liteBoxBg").onclick = liteBoxClose;
}
//Brings up the image with focus
function liteBoxFocus(source,title){
document.getElementById("liteBox").style.display = "block";
document.getElementById("liteBox").innerHTML = "<h1>" + title + "</h1>" +
"<img src='" + source + "'/><br />" +
"<a href='#' onclick='liteBoxClose();'><img src='images/litebox_close.gif' border='0' alt='close'/></a>";
document.getElementById("liteBoxBg").style.display = "block";
}
//closes lite box
function liteBoxClose(){
document.getElementById("liteBox").style.display = "none";
document.getElementById("liteBoxBg").style.display = "none";
return false;
}
</script>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
<a href="
http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" rel="litebox" title="Yahooo Logo"><img src="
http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" alt="" /></a>
</body>
</html>

Your event handlers form a closure that remember a "live" pointer to the variables in the enclosing scope. So when they are actually executed, they have the last value imgSource and imgTitle had.
Instead, you can use this pattern to localize the variable values. This will create copies of source and title inside getClickHandler each time it is called. The returned function hence remembers the values in that iteration of the loop.
//Check those anchors with rel=litebox
for(i = 0;i < elem.length;i++){
if(elem[i].rel == "litebox"){
imgSource = elem[i].href.toString();
imgTitle = elem[i].title;
elem[i].childNodes[0].style.border="0px solid #fff";
elem[i].onclick = getClickHandler(imgSource, imgTitle);
}
}
//Brings up the image with focus
function getClickHandler(source,title){
return function() {
document.getElementById("liteBox").style.display = "block";
document.getElementById("liteBox").innerHTML = "<h1>" + title + "</h1>" +
"<img src='" + source + "'/><br />" +
"<a href='#' onclick='liteBoxClose();'><img src='images/litebox_close.gif' border='0' alt='close'/></a>";
document.getElementById("liteBoxBg").style.display = "block";
}
}