Add element to document and then remove it using Jquery - javascript

I am adding text to an element in Jquery using
$('.alert-saved').append('<br />See more like this >>')
I then show this to the user and pause.
$('.alert-saved').delay(5000).fadeOut(2000);
I would now like to remove all the text I appended.
I have tried this but it didn't work
$('.alert-saved').remove('<br />See more like this >>')

Just pass an empty HTML string argument:
$('.alert-saved').html('');
EDIT 1
If you need to keep other elements, you can use this method:
var newLine = jQuery('<br />See more like this');
jQuery(".alert-saved").append(newLine);
setTimeout(function() {
jQuery(newLine).remove();
}, 2000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="alert-saved">
<span>I wanna stay!</span>
</p>

Change your code to :
$('.alert-saved').append('<div id="divId"><br />See more like this >></div>');
And while removing you can use :
$('.alert-saved').remove('#divId');
With the help of divId you can easily remove your appended element/string from '.alert-saved'.

Check the below code it will work as expected -
$('.alert-saved').append('<div class="testing" <br />See more like this >> </div>')
$('.alert-saved').delay(5000).fadeOut(2000);
$('.alert-saved').remove('.testing')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alert-saved"></div>

You could try this also :
$('.alert-saved').next().remove();

You can wrap your element in an tagged element with a class, or a custom tag, and then delete it accordingly like:
var release_id = 'demo'
$('.alert-saved').append('<div class="added"><br />See more like this >></div>')
setTimeout(function() {
$('.alert-saved>.added').remove();
}, 5000);
Demo: https://jsfiddle.net/Lxy83r43/

Whatever you append append with a class like this and remove all at once using .remove()
Checkout the demo below
$('.yes').click(function(){
$('.alert-saved').append('<div class ="added" ><br />See more like this >>');
})
$('.me').click(function(){
$('.added').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-saved">
asdasdasdas
</div>
<input type="button" class="me" value="remove"/>
<input type="button" class="yes" value="add"/>

An easy way to do this work is adding class or id to appended element.
But if you don't want to do this, you can store new elements in variable and append it using .appendTo() to html document like this:
var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');
When you want to remove elements, use bottom code.
HTML.remove();
var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');
setTimeout(function(){
HTML.remove();
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-saved">
<a>Old link</a>
</div>

Related

Call function on element (that does not have unique id) on hover

When hovering over generic elements of the same type, I want to execute a function on this elements that will perform an animation. However as these elements do not have unique ids I'm not sure how to uniquely identify them in JavaScript. Is there a way to use the this key word for this? I do not want to give them all unique ids because a huge amount of the same element and it seems redundant. Any help would be greatly appreciated thanks.
Heres some code I was playing with to try and get this to work. Preferably the simpler the code or using basic javascript better.
$(document).ready(function(){
$("span").hover(function(){
this.color = red;
});
});
red is not a variable, it is a string. So that you have to use 'red':
To set the color using JavaScript you have to use style property :
$(document).ready(function(){
$("span").hover(function(){
this.style.color = 'red';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
OR: Using jQuery use .css()
$(document).ready(function(){
$("span").hover(function(){
$(this).css({color: 'red'});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
You can user class as a selector
give the same class to all <span> element
Try Following
$('.hoverTest').hover(function(){
$(this).css("color", "red");
}, function(){
$(this).css("color", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='hoverTest'>Your Span Element</span><br/>
<span class='hoverTest'>Span 1</span><br/>
<span class='hoverTest'>Span 2</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span n</span>
Refer Jquery Hover() for more details

Check if text exist in div using jquery

I would like to check if the text exist in the div element, so that if text matches the text in div it will alert "hello". May I know how am I able to achieve this result? Thank you.
<script type="text/javascript">
jQuery(document).ready(function(){
var text = "div[style*=\"width: 550px;\"]";
if (#content.indexOf(text) > -1){
alert("Hello");
}
});
</script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
Here you go with a solution https://jsfiddle.net/9kLnvyqm/
if($('#content').text().length > 0) { // Checking the text inside a div
// Condition to check the text match
if($('#content').text().indexOf('Amy')){
console.log('Hello');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
If you want only the text content from a container then use text(), if you are looking for html content then use html().
Hope this will help you.
It is possible to get the value of inline style of an element.
var wid = $("#content > div")[0].style.width;
if(wid === "550px"){
//correct width detected. you can use alert instead of console.log
console.log("hello");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
You have multiple elements inside #content. you may want to use the return value of
$('#content').children().length;
and loop the program to get inline width of all elements. Ping if you need some help with the loop

change display of element with class x by clicking element with class y (JS)

Using JS or Jquery (preferred JS) how can I change the display style of an element after clicking on another element (both elements identified by their respective classes).
The below doesnt seem to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<i id="xyz" class="class1" >hey</i>
<div id="abc" class="class2" style="display: block;">lo</div>
<script type="text/javascript>
$(function() {
$(".xyz").click(function() {
console.log("element with class xyz was clicked");
$(".abc").css('display': 'none');
});
});
</script>
the console doesnt even log anything
It looks like you are trying to reference your IDs by using CLASS syntax in your jQuery selector.
Instead of using $(".xyz") use $("#xyz"). Same for your $(".abc") selector.
Hope that helps!
You should use document.querySelector(cssSelector) for getting elements by class or id or document.getElementById to get elements by id only.
Here is VanilaJS solution:
var firstElem = document.querySelector(".class1");
firstElem.addEventListener("click", function(event){
var secondElem = document.querySelector(".class2");
secondElem.style.display = "none";
})
<i id="xyz" class="class1" >hey</i>
<div id="abc" class="class2">lo</div>

How to Pass values javascript onclick to jquery function

I have this this image with onclick function on it
<img id='1213' src='img/heart.png' onclick='heart(this.id)'>
which to call this function :
function heart(id) {
$('#heart').dialog('open');
return false;
}
How can i show the ID inside the div?
<div id="heart">
Name : ABC
ID : The ID need to be here
</div>
P/S : i have reason why i want to use the onclick instead directly using the jquery get val from the image id directly.
Firstly, you should use JavaScript to attach your events. You've already included jQuery, so we may as well use that. Once you attach the event, you can use the text() method to set the innerText property of the span within the target div. Try this:
<img id="1213" class="heart" src="img/heart.png" />
<div id="heart">
Name : ABC
ID : <span></span>
</div>
$('.heart').click(function() {
$('#heart span').text(this.id).dialog('open');
});
To show image id, You can use
$('#heart').html(id).dialog('open');
I would recommend you not to use ugly inline event handler. You can bind event using jQuery. Here I have added a CSS class to img element then we can use Class Selector $(".class") to bind event
HTML
<img class="myImage" id='1213' src='img/heart.png'>
Script
$(function() {
$('.myImage').on('click', function(){
$('#heart').html(this.id).dialog('open');
});
});
You can do it like this.
function heart(id) {
$('#heart').text(id).dialog();
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<img id='1213' src='img/heart.png' onclick='heart(this.id);'>
<div id="heart">
</div>
If you are using HTML5, you could make use of data-* attribute.
<img id="someid" src="img/heart.png" data-id="1213"/>
$('#someid').click(function(e) {
var id = this.getAttribute("data-id");
$('#heart').text(id).dialog('open');
});

How do I get the content of a <span> using jQuery?

How do I get the content 'This is my name' of the span?
<div id='item1'>
<span>This is my name</span>
</div>
I think this should be a simple example:
$('#item1 span').text();
or
$('#item1 span').html();
$("#item1 span").text();
Assuming you intended it to read id="item1", you need
$('#item1 span').text()
$('#item1').text(); or $('#item1').html(); works fine for id="item1"
Since you did not provide an attribute for the 'item' value, I am assuming a class is being used:
<div class='item1'>
<span>This is my name</span>
</div>
alert($(".item span").text());
Make sure you wait for the DOM to load to use your code, in jQuery you use the ready() function for that:
<html>
<head>
<title>jQuery test</title>
<!-- script that inserts jquery goes here -->
<script type='text/javascript'>
$(document).ready(function() { alert($(".item span").text()); });
</script>
</head>
<body>
<div class='item1'>
<span>This is my name</span>
</div>
</body>
You could use id in span directly in your html.
<span id="span_id">Client</span>
Then your jQuery code would be
$("#span_id").text();
Some one helped me to check errors and found that he used val() instead of text(), it is not possible to use val() function in span.
So
$("#span_id").val();
will return null.
In javascript wouldn't you use document.getElementById('item1').innertext?
$('span id').text(); worked with me
$('#id span').text() is the answer!
$('#item1 span').html(); Its working with my code
VERY IMPORTANT Additional info on difference between .text() and .html():
If your selector selects more than one item, e.g you have two spans like so
<span class="foo">bar1</span>
<span class="foo">bar2</span>
,
then
$('.foo').text(); appends the two texts and give you that; whereas
$('.foo').html(); gives you only one of those.
<script>
$(document).ready(function () {
$.each($(".classBalence").find("span"), function () {
if ($(this).text() >1) {
$(this).css("color", "green")
}
if ($(this).text() < 1) {
$(this).css("color", "red")
$(this).css("font-weight", "bold")
}
});
});
</script>

Categories