We Keep Coding

how to put button and text in the same line?

I want to put icon, "Notification" and in the same line, but appears in the new line.
<button (click)="openPage()">
<icon name="notifications"></icon> Notification <h1>New</h1>
</button>
Thanks

by default h1 is block element so it takes whole width of screen. You should use inline element like span. Here is the example for span
<button (click)="openPage()">
<icon name="notifications"></icon> Notification <span>New</span>
</button>
if you still want to use h1, use css to make it inline element
#notification {
display: inline;
}
<button (click)="openPage()">
<icon name="notifications"></icon> Notification <h1 id="notification">New</h1>
</button>

I suggest you create a CSS file and type display: inline as shown below.
CSS:
.inline {
display: inline;
}
HTML:
<button class="inline" (click)="openPage()">
<Icon and Text placed here></>
</button>

Give those elements' style: display: inline-block or display: inline

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>

How to apply style to the correct tag with JQuery

I'm trying to add more logic to my code but it's not working. I have to wrap my icon around a span tag so I get the line height properly. I'm using google font:
html.erb
<!-- inside a loop -->
<span class="wish-flex cursor" data-id="wish">
<i class="material-icons cursor">favorite_border</i> Add Wishlist
</span>
<input type="hidden" class="wish-cls" value="<%= product.id %>" />
SCSS
...
span.wish-flex{
display: inline-flex;
vertical-align: middle;
padding-top: 10px
}
.material-icons.red { color: $hotRed; }
span .material-icons{
margin-top: -2px
}
JavaScript
$("[data-id=wish]").click(function(e){
e.preventDefault();
var value = $(this).next(".wish-cls").val();
console.log("Clicked: " + value);
/* Applying the css when clicked
*
* We use toggleClass instead of addClass
* TODO: Ajax
*/
$(this).toggleClass("red");
});
The code is applying the class red to the span. Correct but how to get it to apply the class to the i tag? If the user clicks the heart or the word (Add Wishlist), the script runs.
Maybe I could change up the css to get the inline style with the icon and the text and remove the span?

In your case the this inside of the event handler will point to the span element, But what you are trying to select is the i element inside of it. So you have to use either find() or children() to be invoked from $(this) to get it.
$("[data-id='wish']").click(function(e){
e.preventDefault();
var value = $(this).next(".wish-cls").val();
$("i", this).toggleClass("red");
});
This signature $("selector", elem) is similar to $(elem).find("selector").

Add PlusMinus to Accordion Menu

My Accordion Menu has a Counter to count the Submenus. I want to change it to Plus Minus.
If there is a Submenu than "Plus" should be add if is closed, if is opened than a Minus.
If there is no SubMenu than nothing should be added.
The Counter code
$('#cssmenu > ul > li ul').each(function(index, e){
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
jsFiddle Demo

Well you could achieve this by first getting two icons 1. Plus 2. Minus and putting something like this in your css:
#cssmenu > ul > li.has-sub > a span {
background: url(images/icon_plus.png) 90% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
background: url(images/icon_minus.png) 90% center no-repeat;
}
Here my menu is as follows:
<div id="cssmenu">
<ul>
<li><span>Products</span>
<ul>
<li>Widgets</li>
<li>Menus</li>
<li>Products</li>
</ul>
</li>
</ul>
</div>
Now with jquery check if your menu has a submenu using:
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
And add the two css classes you made and drop down using jquery. I made a jfiddle as that would be too much to put here.
Here you go Jfiddle - accordian plus minus
Hope this helps! Not all of the code is mine. Cheers!

I would suggest you to use the Accordion Jquery-Ui for that
Jquery-ui

Onmouseover <li> change the color of span: first-child color

I am getting problem here:
<ul id="parentnode">
<li><span>I need color change here</span><span>no color</span><span>nocolor</span></li>
<!-- continuing li tags from database -->
</ul>
Here, Onmouseover <li> tag i have to change the color of text which is inside the <span> first-child. Is it possible to change through Javascript, How ?
Note: It is not possible to give id's to <li> tag or <span> tag, because they are dynamically presenting from database.
Thank you.

You can do it by the following css
#parentnode li:first-child:hover span:first-child { color: red; }​
SEE DEMO
*EDIT: link was invalid, removed slash

Try this in your CSS:
ul#parentnode > li:first-child:hover > span:first-child {
color: blue;
}
and change "blue" with whatever color you want

ul#parentnode > li:first-child:hover > span:first-child {
color: ;
}