Develop Reference

Remove div element on click jQuery not working

What I need :
I am trying to create tags on the click of a button. I was successful with my attempt to create divs on the click.
Problems :
As in all the websites one has seen, like in stack-overflow or when you write email addresses , as you finish writing the text a "tag" is formed with a "remove" button when you hover.
Now I want something like this, but I am confused in how to show that cross on the divs.
Also my problem is when I use elements, I am also giving some background color but that is static. And if the text grows then there is no background color on the part of the text.
How should I go about this problem ?
This is what I have tried so far : http://jsfiddle.net/abhighosh18/wk9uxfz5/1/
JS :
$('.btnAdd').on('click', function () {
$('<div/>', {
id: 'newCo',
title: $("#prodName").val(),
text: $("#prodName").val()
}).css({
fontWeight: 700,
width : '30px',
background : 'lightblue',
padding: '2px',
margin: '5px',
float : 'left'
}).appendTo("#content");
});
$('#newCo').on('click',function(){
$(this).remove();
});

Some illumination --
$('#newCo').on('click',function(){
$(this).remove();
});
The above won't work because the #newCo element does not exist at the time that line executes.
$(document).on('click','#newCo',function(){ $(this).remove(); });
This refactored line of code listens to the document and WILL work on elements that don't exist at the time the DOM is first loaded. However, ID is not what you want to use here... because IDs need to be unique and there would quickly be several div withs the same ID if you click the .btnAdd element.
There are many ways to accomplish what you want, I just wanted to illustrate why your approach is failing.
THE FIX: you could chain .addClass("removable-tag") within your div-creating click function (before .appendTo()), and listen to $(document).on('click','.removable-tag',function(){...});, and THAT would function as intended.

You can use display: inline-block css property and min-width instead of width:
$('.btnAdd').on('click', function () {
$('<div/>', {
id: 'newCo',
title: $("#prodName").val(),
text: $("#prodName").val()
}).css({
fontWeight: 700,
minWidth : '30px',
background : 'lightblue',
padding: '2px',
margin: '5px',
display: 'inline-block'
}).appendTo("#content");
});
http://jsfiddle.net/Lathtqd8/

NOTE: What follow is an answer to this part of question ( before update ) :
Now what I need is the CSS for the divs to be placed side-by-side. I
have seen the code for doing so, but I need to know how to write the
code for dynamically generated divs.
Another thing i tried was creating buttons instead of divs. That
placed my buttons side by side without any extra effort from CSS.
add this to your css :
#newCo {
float: left;
}
and remove the forcing width : '30px', from your JS code otherwise it will get broken on large content.
http://jsfiddle.net/tunecino/wk9uxfz5/5/

Add some class not id when you want to add multiple elements.
snippet added
--joy
//javascript
$('.btnAdd').on('click', function () {
$('<div/>', {
class: 'newCo',
title: $("#prodName").val(),
text: $("#prodName").val(),
'data-idn':'some_unique_number'
}).append('<a>x</a>')
.appendTo("#content")
.find('a').click(function(){
var idn = $(this).parent().data('idn');
$(this).parent().remove();
//removeCallback(idn); //call anything with idn if required
});
});
/*CSS*/
.newCo{float:left;min-width:30px;background:lightblue;font-weight:700;padding:2px;margin:5px;}
.newCo > a {cursor:pointer;margin:0 0 0 3px;border-radius:50%;color:red;padding:0;text-shadow:0px 0px 1px #fff;font-weight:200;font-size:16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Product Name:<input id="prodName" type="text">
<button class="btnAdd" value="Click Me!">Add Product</button>
<br/><br/><br/><div id="content" height="100px" width="100px" style="color:blue"></div>

try this:
$("#mydiv").off('click');

Bootstrap popover replicating code

I am using raty to perform the rating functionality and I am showing it inside a popover.
The problem is that the first time I click on the link, it correctly create the stars but, when I click for the second time, the stars are replicated, so it popups 10 stars instead of 5.
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
I replicate the error in this fiddle.
Can anyone let me know how to fix this, and, therefore, only show 5 stars?
Thanks!!!!

I am not overly familiar with raty, but it seems like you need to destroy the existing before running the code a second, or third time.
$(this).raty('destroy');
something like that, check the raty doc for the exact implimentation

please review this code
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty('destroy');
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
Demo :http://jsfiddle.net/x9WhH/3/

JQueryUI Tooltip settings ignored

I can't get JQueryUI to pay any attention to the tooltip settings I am trying to apply
var li = jQuery('<li title="test">test</li>');
jQuery(myUl).append(li);
jQuery(li).tooltip({
track: true,
position: {
my: "left top",
at: "bottom",
using: function (position, feedback) {
$( this ).css( position );
$("<div>").addClass("arrow")
}
},
content: function () {
return $(this).attr('title');
}
});
I know that the tooltip() function is being called because I can comment it out and the display reverts back to the standard tooltip, but nothing in the parameters makes any difference to the display. My first priority is to get the content to appear on multiple lines, for that I have added <br /> tags at the right places. But so far they always get displayed to the user.
Help!

It appears to be a user error. I had no idea that Bootstrap also provided a Tooltip function and it is taking priority here. Once I started using Bootstrap Tooltip options they were used just fine

remove the line:
var li = jQuery('<li title="test">test</li>');
add <li> element directly to jQuery:
jQuery('li').tooltip({
track: true,
position: {
my: "left top",
at: "bottom",
using: function (position, feedback) {
$( this ).css( position );
$("<div>").addClass("arrow")
}
},
content: function () {
return $(this).attr('title');
}
});

How do I create a self-closing link inside a tipsy tooltip without reloading the page?

I'm using Tipsy to display some content; inside this content I have a link (a big X) that is intended to close the tooltip. However, when clicked, it simply jumps to the top of the page and fails to close the tooltip, even though I have it set to return false. My code looks like this:
$(".favs").tipsy({
fade: true,
gravity: 'n',
trigger: "manual",
html: true,
offset: 5,
opacity: '0.9',
delayIn: 0,
delayOut: 0,
title:
function() {
return $("#favs_1").html();
}
});
$(".favs").click(function(){
$(this).tipsy("show");
return false;
});
$(".closetip").click(function(){
$(".tipsy").remove();
return false;
});
Applied to this HTML:
<div style="height: 1800px;">
<br /><br /><br /><br />
Favorite Movies
</div>
<div id="favs_1" style="display: none;">
X
Tooltip content
</div>
Relevant fiddle: http://jsfiddle.net/gZkJJ/
I solved half the problem by having any click result in a tooltip closure. I tried to exempt clicks in certain divs from this with event.stopPropagation(); -- that led to the tooltip being closed, but a) the divs in question were not exempt and b) the X still jumped to the top of the page. Same HTML as above, but with this slightly different JavaScript:
$(".favs").tipsy({
fade: true,
gravity: 'n',
trigger: "manual",
html: true,
offset: 5,
opacity: '0.9',
delayIn: 0,
delayOut: 0,
title:
function() {
return $("#favs_1").html();
}
});
$(".favs").click(function(){
$(this).tipsy("show");
return false;
});
$("html, .closetip").click(function() {
$(".tipsy").remove();
});
$(".tipsy, .tipsy-n, .tipsy-inner, .favs").click(function(event){
event.stopPropagation();
});
Relevant fiddle for this variation: http://jsfiddle.net/u62eH/
I included the excessive height and spacing so that you can verify the link is either reloading the frame or forcing a scroll to the top, which you can do by scrolling down slightly before hitting the X.
Any help would be much appreciated. I feel like I'm missing something obvious.

In the event handler for clicking on either the html element or the .closetip element, call e.preventDefault() if it was the anchor:
$("html, .closetip").click(function(e) {
if(e.target.nodeName === 'A')
e.preventDefault();
$(".tipsy").remove();
});

Why the box disappear immediately?

I want the mouseover on the coverImg then show the coverInfo
the coverInfo show the title and the description of the image
then the coverInfo do show
but I want the coverInfo stay and clickable when mouserover on itself
but it disappear immediately.
So what's the point I have missed?
The HTML
<div class="workshop_img">
<div class="coverInfo"></div>
<a href="#">
<span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia "></span>
</a>
The CSS：
.coverInfo {
position:absolute;
width: 200px;
height:200px;
background:rgba(0,0,0,0.5);
top:30%;
left:30%;
display:none;
}
see the jQuery code
$(function() {
$(".coverImg").each(function() {
//make the background image move a little pixels
$(this).css({
'backgroundPosition' : "-40px 0"
}).mouseover(function() {
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
}, {
duration : 90
});
//shwo the info box
var content = $(this).attr("title");
$("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast");
}).mouseout(function() {
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
}, {
duration : 200,
});
$(this).parent().find(".coverInfo").stop().fadeOut("fast");
})
})
});
</div>
EDIT：
I have searched a lot and find something similar, I took them and the answer given below together to solve my problem, here is the code:
$(function() {
$(".coverImg").css({
'backgroundPosition' : "-40px 0"
}).mouseenter(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
},90);
info.show();
}).mouseleave(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
},200);
info.stop().hide();
});
});
It has just been clean, but do not work fine.
What's the problem?

The new box shows immediately because it is not initially marked as hidden. .fadeIn() only fades in something that is initially not showing.
You can make it initially not visible like this:
$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast");
You also can get rid of the .each() iterator you're using. You don't need it. You can just use:
$(".coverImg").css(...).mouseover(...).mouseout(...);
You don't need the .each() at all.
I'd also suggest you use .hover(fn1, fn2) instead of .mouseover(fn1) and .mouseout(fn2).
And, it looks like you are creating a new object and inserting it on every mouseover event such that multiple such objects will pile up in the page. You should either .remove() the object in the mouseout function or you should reuse a previously existing element if it exists in the element rather than creating more and more of them.
Sometimes when you are using the events for mouse hovering and you are also changing the page, the change to the page can cause the element to lose the mouse hover which then hides the change to the page and then it all starts over again. I can't tell for sure if that is happening in your case (I'd need a working example to play with to see), but it seems possible.