Develop Reference

How to remove simultaneously both elements in DOM with the same ids in JavaScript?

What I am trying to do is, when I click on green element I want the purple one with the same id be removed. Now my problem is I can not loop through purple element's id and find the one which match with green one and then remove it from the DOM. I tried to use querySelectorAll but it doesn't work with addEventListener and when I use querySelector it just returns always the first element.So the goal is to remove both elements green and purple that has the same id.
if you see in HTML code inside the ul tag there is another one with the id container actually this is the problem the first ul tag with id main is the original one and the one inside it with id container it will be generated automatically with jQuery plugin if I set any new attribute to class main the class container will copy it. my goal is to click on green one and delete two elements from DOM. The one which I am clicking and another with same id. is there any way for that?
Has anyone solution for that how to remove simultaneously another element with the same id of clicked element?
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("ul").addEventListener("click", getItem)
})
function getItem(e) {
let li = e.target.closest(".visible")
let span = e.target
let getID = span.attributes.id.value
console.log("This is visible element", getID)
if (li) {
li.remove()
}
}
#main {
background-color: skyblue;
}
.hidden {
border: solid 2px black;
list-style: none;
margin: 2px;
background-color: #7d34eb;
}
#container {
background-color: #3483eb;
margin-top: 15px
}
.visible {
border: solid 2px black;
list-style: none;
margin: 2px;
background-color: #12a370;
}
span {
position: relative;
left: 1rem;
padding: 50%;
color: red;
cursor: pointer;
}
<div class="content">
<ul id="main">
<li class="hidden">
<span id="1">A</span>
</li>
<li class="hidden">
<span id="2">B</span>
</li>
<li class="hidden">
<span id="3">C</span>
</li>
<ul id="container">
<li class="visible">
<span id="1">A</span>
</li>
<li class="visible">
<span id="2">B</span>
</li>
<li class="visible">
<span id="3">C</span>
</li>
</ul>
</ul>
</div>

I changed all your spans to div to fill up the LI element. I also changed all id to data-id, because id should be a unique.
EDIT: Based on the comment. In your original post, you added a click listener on the first UL that querySelector returns, which is #main. I made that more clear in the code. As the comment, in my answer, suggest, it's better to add a click listener to ul#container instead.
EDIT 2: Based on another comment. :P I added code for looping through and removing all elements with matching data-id.
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("ul#main").addEventListener("click", getItem);
})
function getItem(e) {
let divEl = e.target;
let dataset = divEl.dataset;
let visibleLi = divEl.parentElement;
let isVisibleElement = visibleLi.classList.contains('visible');
let matchingDatasetDivs = document.querySelectorAll(`[data-id="${dataset.id}"]`);
if (isVisibleElement)
console.log("This is visible element", dataset.id);
if (isVisibleElement && matchingDatasetDivs.length) {
for (let i = 0; i < matchingDatasetDivs.length; i++) {
let containerLi = matchingDatasetDivs[i].parentElement;
containerLi.remove();
}
}
}
#main {
background-color: skyblue;
}
.hidden, .visible {
border: solid 2px black;
list-style: none;
margin: 2px;
background-color: #7d34eb;
}
.visible {
background-color: #12a370;
}
#container {
background-color: #3483eb;
margin-top: 15px
}
li > div {
position: relative;
left: 1rem;
/* padding: 50%; */
color: red;
cursor: pointer;
text-align: center; /* ADDED */
}
<div class="content">
<ul id="main">
<li class="hidden">
<div data-id="1">A</div>
</li>
<li class="hidden">
<div data-id="2">B</div>
</li>
<li class="hidden">
<div data-id="3">C</div>
</li>
<ul id="container">
<li class="visible">
<div data-id="1">A</div>
</li>
<li class="visible">
<div data-id="2">B</div>
</li>
<li class="visible">
<div data-id="3">C</div>
</li>
</ul>
</ul>
</div>

<ul> display inline-block not working

My jsFiddle is here : https://jsfiddle.net/r1s6651y/1/
I am not able to get Navigation with Numerals to be aligned horizontally.
I have applied display : inline-block for upper ul but still the next menu item begins on the second line.
Any clues ?
It should be stacked as :
1111111 22222222
AAAAAAAAAAAAA
BBBBBBBBBBBBB

You can't have li with width: 100%; and then expect them to align next to eachother. Ofcourse they naturally fall to 2 lines instead of 1, they're inline elements after all (Think of it like this: the <p> tag is also "inline" bu default. When the text in a <p> is too long, the text "breaks" to a new line. As will your li when it is set to be inline). You also want the li to next to eachother, not the ul which is what contains the li. So apply the display: inline-block; to the (correct) li elements
ul#myRow li {
width: auto; //could also be set to 50% if it's just 2 li elements
display: inline-block;
}

Two things. As already noted, you want the li items to be display:inline. You also need to remove the width:100% from the lis of #myRow. Then it will collapse and display inline as long as the container is wide enough for them (otherwise it will wrap).
li {
background: #00945f;
border-bottom: 1px solid #016e39;
clear: both;
float: none;
height: 62px;
margin: 0;
padding: 0 30px 30px;
width: 100%;
}
ul {
list-style-type: none;
}
ul#myRow li {
display:inline-block;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<ul id="myRow" class="row">
<li>
11111111
</li>
<li>
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>

Man, you do some mistakes.
I fixed it at: https://jsfiddle.net/r1s6651y/4/
li {
display: inline-block;
background: #00945f;
border-bottom: 1px solid #016e39;
margin: 0;
padding: 10px 20px;
}

put a class on the li you want horizontal, then add css display: inline
.horiz {
display: inline;
}
<section>
<ul id="myRow" class="row">
<li class="horiz">
11111111
</li>
<li class="horiz">
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>

different height to li tag

i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}

Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.

First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]

you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>

Button disappearing, overflow needs to kick in at max-width

So basically, I have a tab bar where you have an add button to clone tabs and later edit them. My problem is that once so many tabs are added, my (left and right arrows) and my add button are removed. How can I add tabs, but keep my buttons from disappearing? Fixed position is not an option, I want the buttons next to the newest tab, and once the bar reaches a max-width, the buttons stay there. the arrows are to scroll through the tabs to see one's that will be hidden on overflow. http://jsfiddle.net/pHraC/1/
html
<div class="tabBox" style='max-width:800px'>
<ul class="tabs">
<li class="selected">Certificate of Quantity</li>
<li>COQ - Products/Chemicals</li>
<li>Movement Summary</li>
<li>Barge Survey</li>
<ul class="tabButtons">
<li><-</li>
<li>-></li>
<li><div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
<input type='button' value='add' class='addTab' /></div></li>
</ul>
</ul>
</div>
jquery
// add new tab
$("input.addTab").live("click", function (event) {
var ultab = $(this).closest('.tabs'); // cache ul.tabs
var li = ultab.children('li:not(.selected)').first(); // cache the row
ultab.children('li:last').after(li.clone().find('a').attr("href", "#").text('New Tab').end());
});

First of all, I would suggest you seperate the .tabButtons form the .tabs
<div class="tabBox" style='max-width:800px'>
<ul class="tabs">
<li class="selected">Certificate of Quantity
</li>
<li>COQ - Products/Chemicals
</li>
<li>Movement Summary
</li>
<li>Barge Survey
</li>
</ul>
<ul class="tabButtons">
<li> <-
</li>
<li>->
</li>
<li>
<div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
<input type='button' value='add' class='addTab' />
</div>
</li>
</ul>
then, use position:absolute to put them where you like:
.tabBox { position:relative;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 50px 0 0;}
.tabButtons {
position:absolute;
top:0px;
right:10px;
z-index:2;
}
You'll also have to define a position other than static to .tabBox for this to work and add some padding for the add button.
Finally, style the .tabs li like this:
.tabBox .tabs li {
display: inline-block;
list-style: none;
margin: 9px 0 0 0;
padding: 3px 1px 0;
height: 36px;
overflow: hidden;
position: relative;
z-index: 1;
}
and add white-space:nowrap; and display:inline-block; to the .tabBox .tabs
here's the result: http://jsfiddle.net/pavloschris/pHraC/4/

most simple way is to offset the top level <ul> with a padding and put the buttons as position absolute.
Here's a quick demo.
http://jsfiddle.net/ionko22/vURkK/
Oh and probably it's better to put your child <ul> within an <li>.

Google liked drop down menu

alt text http://sites.google.com/site/yanchengcheok/Home/google-drop-down-menu.png
Hello, whenever we go to Google Page and click on the "more", a menu will be dropped down. I would like to have the following effect on my web site too. May I know which JavaScript library can help me to achieve the similar effect?

Google released their closure libray, I think the menu in your question is the following
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/submenus.html
hope it helps
Cheers

Similar menus, very well documented and flexible. Only Denis' answer -- using the actual closure library -- is better, but I doubt it's as well documented.

Any JavaScript library can help you in such situations.
You may want to check out the following example, which I hope can get you going in the right direction:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Drop down demo</title>
</head>
<body style="font-family: Arial; font-size: 11px; margin: 0 auto;">
<div id="menu_bar" style="height: 25px; width: 100%; position: absolute;">
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
<div style="float: left;">
<a id="more_link" href="#" style="float: left;">more...</a>
<div id="more_menu" style="width: 95px; display: none;">
More Item 1
More Item 2
More Item 3
More Item 4
</div>
</div>
</div>
<div id="spacer" style="height: 30px;"></div>
Here goes the body
<script type="text/javascript">
document.getElementById('more_link').addEventListener('click', function(e) {
document.getElementById('more_menu').style.display = 'block';
e.stopPropagation();
}, false);
document.body.addEventListener('click', function() {
document.getElementById('more_menu').style.display = 'none';
}, false);
</script>
</body>
</html>
Screenshot from the above example:
Drop down demo http://img31.imageshack.us/img31/7576/menuxs.png

You just add listener to click event for a "more" element:
elementRef.addEventListener("click", function() {
// listener code here
}, false);
(you can do this in any JS library if you want to). This listener should now just display (change CSS property display from none to block) another element (ie. <div id="more" />). Also you add another listener for click event, but this time for the body element (to hide menu).
Final code could looks like following:
JavaScript:
document.getElementById("toggle-more").addEventListener("click", function(e) {
document.getElementById("more").style.display = "block";
e.stopPropagation();
}, false);
document.body.addEventListener("click", function() {
document.getElementById("more").style.display = "none";
}, false);
HTML:
<span id="toggle-more">More...</span>
<div id="more">
<ul> ... </ul>
</div>
CSS:
#more {
display: none;
position: absolute;
top: 15px;
left: 150px;
}

alt text http://sites.google.com/site/yanchengcheok/Home/google-copy-cat.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #fff;
font: .74em "Trebuchet MS", Verdana, Arial, sans-serif;
line-height: 1.5em;
}
/* Help Menu Section. */
a#help-menu:hover {
color: #3B6EBF;
}
#help-menu {
text-decoration: none;
}
#help-menu u {
text-decoration: underline;
}
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ display: -moz-inline-box; /* For FF */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on blocks */
list-style: none;
}
#jsddm li a
{
display: block;
white-space: nowrap}
#jsddm li ul
{ margin: 0;
padding: 0;
background:none repeat scroll 0 0 #FFFFFF;
border-color:#C9D7F1 #3366CC #3366CC #A2BAE7;
border-style:solid;
border-width:1px;
text-align: left;
position: absolute;
display: none;}
#jsddm li ul li
{
float: none;
display: inline}
#jsddm li ul li a
{
padding:0.2em 0.5em;
text-decoration: none;
background: #FFFFFF}
#jsddm li ul li a:hover
{
color: #FFFFFF;
background: #3366CC}
.jsddm-seperator {
border-top:1px solid #C9D7F1;
font-size:1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ ddmenuitem = $(this).find('ul').eq(0).toggle();}
function jsddm_close(evt)
{
if (ddmenuitem) ddmenuitem.hide();
}
$(document).ready(function()
{
$('#jsddm > li').bind('click', jsddm_open);
//$(this).bind('click', jsddm_close);
});
</script>
</head>
<body>
<div style="text-align:center">
<ul id="jsddm">
<li>Home</li>
<li> · </li>
<li>Main Menu1</li>
<li> · </li>
<li>Main Menu2</li>
<li> · </li>
<li>Main Menu3</li>
<li> · </li>
<li>Main Menu4</li>
<li> · </li>
<li><u>Help</u><small>▼</small>
<ul>
<li>Install</li>
<li><div class="jsddm-seperator"></div></li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</body>

a few weeks back I had stumbled across a blog post on creating google like menu
may be that could help you :
http://blog.geotitles.com/2011/09/creating-the-new-top-black-bar-found-in-google-and-all-its-products/
It uses jQuery but the images you have posted looks like the old google menu since the new menu is black and even this blog post is on the same new menu but it also includes the dropdown menu, so I think this might help you.
Update
Here is a blog post on creating the old menu as well, you can also check this out, but this does not have the dropdown feature which you are asking for, may be the former one is better.