We Keep Coding

JQuery show delete button on appended div

I have so far able to remove each appened elements using .remove() function of JQuery. my problem is the delete button is always showing on the first element.
I want to hide the delete button on first element and show the delete button when I append a new element.
I have set the delete button on the first element to
.delete-button:first-child{
display:none;
}
in my css but all succeeding appends do not show the delete button..
how can I do this with JQuery can it be done using CSS only?

li:first-child .delete-button { display:none }
<ul>
<li>
First <button class="delete-button">Delete</button>
</li>
<li>
Second <button class="delete-button">Delete</button>
</li>
</ul>
Making assumptions on your markup since none was provided. You can accomplish it using css.

My interpretation of your requirement: If there is only one item, do not show a delete button; if there are multiple items, show a delete button for every item.
Your attempt didn't work because .delete-button:first-child selects all elements with the delete-button class that are also the first-child of their parent element. Presumably this would be all of your buttons.
You can instead use the :only-of-type selector on the elements that contain the delete buttons, e.g., assuming they have the item class:
.item:only-of-type .delete-button { display: none; }
Or if they are li elements:
li:only-of-type .delete-button { display: none; }
That way if the item/li/whatever is the only item then its delete button will be hidden automatically, but as soon as you add additional items the delete button will be shown automatically for all items.
Here's a simple demo with a bit of JS to mock up the add and delete functionality:
$("#parent").on("click", ".delete-button", function() {
$(this).parent().remove();
});
$(".add-button").on("click", function() {
$("#parent").children().first().clone().appendTo("#parent");
});
.item:only-of-type .delete-button { display: none; }
.item { margin: 3px; padding: 2px; width: 100px; border: thin black solid; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="add-button">Add Item</button>
<div id="parent">
<div class="item">
<button class="delete-button">Delete</button>
<div>An item</div>
</div>
</div>

You can try,
div ul:not(:first-child) {
.delete-button{
display:none;
}
}

You might wanna consider browser compatibility before using CSS - Browser support for CSS :first-child and :last-child
Having said that, With jQuery you can write an event handler to change css of all the child elements except the last.
Consider this example from jQuery: How to listen for DOM changes?
$("element-root").bind("DOMSubtreeModified", "CustomHandler");

Yes, Its possible by css only. I hope this snippet helps.
$(document).on('click','#AppendList', function(){
$("ul").append('<li>List <button class="delete-button">Delete</button></li>');
})
li .delete-button { display:none }
li:last-child .delete-button { display: inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
First <button class="delete-button">Delete</button>
</li>
<li>
Second <button class="delete-button">Delete</button>
</li>
</ul>
<hr>
<button type="button" id="AppendList">Add List</button>

Highlight parents of list but not all children

I have created a <ul> element and what I am trying to do is to highlight the list elements from a certain child and all the way up. However, because of the nested children, when I highlight a parent also all its children are highlighted (while I want to highlight only the text of the parents).
https://jsfiddle.net/zcfvuh6h/3/
In this example, I should get the nodes Four12, Four1 and Four highlighted.
Any suggestions? Thank you.

EDIT:
Okay, so after understanding what the actual problem you are trying to solve is, it took a bit of work, but I got a working solution.
Working DEMO
A few things to note
1. All of your text in your <li>need to be in a container of some sort, a <span> is fine. You had some in spans and some not, so I put them all in spans for you.
2. This cannot be done with background-color on the <li> or <ul> because it spans multiple lines if it has children. You have to use a css pseudo-element in order to get the desired effect.
3. The demo I have posted also dynamically sets the background of the element and parents based on which element you click on. You must click on a list item in order for the backgrounds colors to show up.
4. Your d3 code that you included is all obsolete at this point. It can be done with 7 toal lines of jQuery.
5. Enjoy!
HTML
...
<li id="i6"><span class="listItem">Four</span>
<ul>
<li id="i7" class="listItem"><span class="listItem">Four1</span>
<ul>
<li id="i71" class="listItem"><span class="listItem">Four11</span>
<ul>
<li id="i4111" class="listItem"><span class="listItem">Four111</span></li>
<li id="i4112" class="listItem"><span class="listItem">Four112</span></li>
</ul>
</li>
<li id="i12" class="listItem"><span class="listItem">Four12</span></li>
</ul>
<li class="listItem"><span class="listItem">Five</span></li>
</ul>
</li>
...
Javascript
$(function () {
$(".listItem:not(li)").on("click", function () {
var parentListItem = $(this).parent();
$("#menu1 .highlight").removeClass("highlight");
parentListItem.addClass("highlight").parents("li").addClass("highlight");
});
});
CSS
.highlight {
position: relative;
}
.highlight > * {
position: relative;
z-index: 100;
}
.highlight::before {
content: ' ';
background-color: cyan;
width: 100%;
height: 15px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

Can li class be swapped with css only

Been made aware you cant swap classes unless its a sibling. so instead of putting the class in a new div im trying to put it into the same list but give it a class to hide, then be visible when another li is hovered.
http://jsfiddle.net/e79g4p1p/13/
<div class="bodyfooter_block bbshadowb">
<p class="typotitle_sml"><?php echo $var_furtherinfotitle; ?></p>
<p class="typosubtitle_sml"><?php echo $var_furtherinfoheading; ?></p>
<p class="typotext" style="padding-top:16px;">
<ul class="blocklist">
<li>text hidden</li>
<li>text</li>
<li>yugiugugu</li>
<li>ugiugguiug</li>
<li>ygguiguig</li>
<li>uihoihoihoih</li>
<li>uhgiuhiuhuh</li>
<p>po</p>
<li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>
</p>
</div>
css
.hover_text1 {
}
.bodyfooter_text1 {
list-style-type: none;
visibility: hidden;
}
.hover_text1:hover > #bodyfooter_text1 {
list-style-type: none;
width:260px;
height:102px;
background: #222222;
color: #CCCCCC;
padding:12px;
padding-top:6px;
border-radius: 6px;
visibility: visible;
}
Tried with js but doesnt work:
$("#hover_text1").hover(function() {
$(".bodyfooter_text1").addClass("bodyfooter_text1_hover");
});
http://jsfiddle.net/e79g4p1p/23/

I strongly suggest you go over the basics of CSS once again.
The problem you face can be overcome using pure CSS - we need a selector called the General Sibling Combinator:
CSS
.hover_text1:hover ~ #bodyfooter_text1 {
display: block;
}
This, however, requires you to restructure your markup by a marginal amount, so the "preceded by element" rule works correctly - the selector we use requires both the preceding and the targeted element to share the same parent:
HTML
<ul class="blocklist">
<li class="hover_text1">text hidden</li>
<li>text</li>
<!-- ... -->
<li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>
Working example on JSFiddle.
The fiddle I've linked is a very simplified version of your code, modified only to highlight the selectors working and nothing else.

Sizing an <ul> in a table cell

I'm building an HTML view consisting of a <table>, with each cell containing only a single <ul> element, with a variable number of <li>. For readability reasons, my rows have a min-width: 100px;, but expand based on the contents of the <ul>. But in the other cells (which a lower number of <li>). I want my <ul> to use 100% of the cell's height. At the moment, they keep the 100px height and are verticaly centered.
My view can be summed up to that :
<table>
<tr>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
</tr>
<tr>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
</tr>
</table>
My reason for this, is that each <li> can be dragged & dropped between every <ul>, but the fact they are not resizing make dropping on an empty list kind of hazardous, because you don't "see" them, and have to guess where they are. It would be a lot easier if they were using the full cell dimensions.
I have made a lot of tries using developer tools, but could not find the right combination of CSS and Javascript.
Technicals prerequisites :
Javascript DOM manipulation is OK, I already do it to resize my table. I use ExtJS, but I'm OK with porting jQuery or pure JS code.
Compatibility with IE8 is a must (75% of final users are on IE. Gotta love the corporate world...)
Thanks for any advice !
EDIT : Here's a Fiddle that represents my code as closely as possible (NDA prevents me from sharing the original code)

For height: 100% to work as expected the container must have its height set. I have a solution below that uses JavaScript to set the height of all the ul's, it can be used as a function that runs every time it changes if needed:
function fixDimensions() {
var table = document.getElementById('table');
var trs = table.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i++){
var tds = trs[i].getElementsByTagName('td');
for(var g = 0; g < tds.length; g++){
var ul = tds[g].getElementsByTagName('ul')[0];
ul.style.height = (tds[g].clientHeight - 12) + 'px';
}
}
}
The - 12 on the height is for the padding and border. JSFiddle.

You could use td themselves to draw the borders : http://jsfiddle.net/P5h8d/2/
table {
width: 100%;
background:black;
border-spacing:1px;
}
tr {
min-height: 50px;
width: 100%;
}
tbody th, tbody td {
border: 3px dotted red;
}
th, td {
width: 20%;
background:white;
}
You might not need a table if:
you use display:table instead <table> to turn <ul> visually into a cell.
DEMO
<section>
<div>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
</div>
<div>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
</div>
</section>
CSS
section {
display:table;
border-spacing:5px;
}
section > div {
display:table-row;
}
section>div>ul {
display:table-cell;
background:red;
min-width:100px;
}
you use display:flex;
DEMO
basic CSS used :
tr {
display:flex;/* reset display:defaut*/
}
td {background:gray;
display:flex;/* here again display reset */
flex-direction:column;/* make sure we draw content from top to bottom */
margin:2px;
}
ul {
padding:0;
margin:5px;;
min-width:100px;
background:red;
flex:1;/* fills or shares whole height of its flex box*/
}

Not to pollute my first answer, added here the drag and drop js
No matter the height of the ul , li drops in !
here is a CSS way to extend area around an element to increase area where it can catch mouse events.
IE8 understands :before/:after , so we use them. and set them in absolute position on top and bottom of your ul.
DEMO
the CSS used:
td {overflow:hidden;/*keep ul:pseudos inside */}
ul {
position:relative;
}
ul:before,
ul:after {
content:'';
position:absolute;
height:200px;/* whatever you need or think it is safe */
left:0;
width:100%;
}
ul:before {
bottom:100%;
}
ul:after {
top:100%;
}
added to the demo basic HTML5 drag and drop (attributes and js) since it was missing from your fiddle.
function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}

Completely linkable li element

I need to make linkable an entire <li> or <tr> element, someone suggest me to use javascript, with an onclick action.
function doNav(url)
{
document.location.href = url;
}
This do the job, the problem is that, in this way is impossible for the user, understand what url is going to. How to realize my need (completly clickable elements) without changing browser behaviour?

You don't need javascript for this. Add this css
ul li a {
display: block;
padding: 10px 20px;//more or less, to suit your needs
text-decoration: none;
}
This will make the entire <li> containing an anchor clickable

<li class="block">Text</li>
That lets you see the target. And then:
.block{
display:block;
text-decoration:none; //just so it isn't underlined
}
in the CSS will take care of the "whole thing needs to be clickable" problem.

HTML
<ul class="menu">
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
</ul>
CSS:
ul li.anchors{
text-decoration:underline;
color:blue;
list-style-type:none;
display: inline-block;
margin:2px 4px;
padding: 2px 4px;
}
ul li.anchors:hover{
color:navy;
cursor:pointer;
}
better way may be like this: http://jsfiddle.net/iamanubhavsaini/Cv2FM/1/
here, use content property and data- attribute to tell user before hand as what they are going to click on.