This question already has answers here:
Remove DIV tag using Javascript or Jquery
(5 answers)
Closed 8 years ago.
so I'm trying to remove a div using javascript, the div I'm trying to remove:
<div class="popover fade left in" style="top: -76.5px; left: -404px; display: block;">
The code I am using to try to remove it:
Close
Am I doing anything wrong?
If you're using the remove jQuery function, you need to call it on a jQuery object. getElementByClassName returns a plain DOM element. Use the jQuery selector $ to select the element and wrap it in a jQuery object, and then call .remove on it:
$('.popover').remove();
If you're using the plain JavaScript .remove(), you need to call it on a single DOM element, but getElementsByClassName returns a collection. Try this:
getElementsByClassName('popover')[0].remove()
Try using this code:
HTML
Close
Javascript
removePopovers = function () {
var popovers = document.querySelectorAll('.popover');
for (var i = 0; i < popovers.length; i++) {
popovers[i].outerHTML= '';
}
}
This selects all elements with the popover class and sets theirouterHTML to nothing, which removes the divs.
JSFiddle
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed last month.
i tried to change this text using getElementsByTagName() but it did not work i do not know what is the probleme
enter image description here
getElementsByTagName()
You should check the DOM documentation because you are misunderstanding what that function does, getElementsByTagName("s-button-text") isn't getting the element because thats not how it works.
This would work getElementsByClassName("s-button-text") or getElementsByTagName("span"), tag refers to the <span> in this case, and class refers to the class=" attribute.
I would highly recommend you don't use the second one as it will get other <span> elements in the page and not just the one you want.
As well, even if you replace that it will create an error, this is how to do what you want to do:
function change_content() {
let elements = document.getElementsByClassName('s-button-text');
for (let i=0; i<elements.length; i++) {
elements[i].innerHTML = "newText";
}
}
getElementsByTagName() returns an array of elements by tag name. You are trying to get an element by it's class so you need a different method. You can use querySelector() or querySelectorAll().
querySelector() is used to find a single element by a CSS selector.
querySelectorAll() is used to get a list of elements by a CSS selector.
This will find all elements with this class name and change the text of the first element returned:
document.querySelectorAll('.s-button-text')[0].textContent = 'New text';
This question already has answers here:
For loop for HTMLCollection elements
(13 answers)
Closed 3 years ago.
I want to retrieve the content of all textarea elements inside a particular div. Here is how I tried to iterate over them
var ta = document.getElementById('parent').getElementsByTagName('textarea')
ta.forEach(element => {
console.log(element);
});
but I get
Uncaught TypeError: ta.forEach is not a function
at HTMLButtonElement.<anonymous> (details:512)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.r.handle (jquery.min.js:3)
Is this the proper way to get all textarea elements inside a particular div?
I want to get the content of all of these textarea elements along with the name of the element. How can I do that?
getElementsByTagName returns HTMLCollection. It does not have the forEach method. Use the for loop as illsutrated in Element.getElementsByTagName().
var ta = document.getElementById('parent').getElementsByTagName('textarea');
for (let element of ta) {
console.log(element);
}
Use .querySelectorAll(), which allows for any valid CSS selector to be passed to it and it will return a collection of all matching elements. Then, loop over the results, but because IE doesn't support .forEach() on collections, you should convert it into a formal array before using .forEach().
And don't use .getElementsByTagName() (ever again).
// Get the textareas inside the div with an id of "target2"
let areas = document.querySelectorAll("#target2 textarea");
// Convert the collection into an array and loop over the array
Array.prototype.slice.call(areas).forEach(function(area){
console.log(area.textContent);
});
<div id="target">
<textarea>stuff</textarea>
</div>
<div id="target2">
<textarea>stuff2</textarea>
<textarea>stuff2a</textarea>
</div>
<div id="target3">
<textarea>stuff3</textarea>
</div>
If you are just trying to get the content of the input or textarea, I think you could use .value to capture that and print it to console.
something like:
for (i = 0; i < document.getElementById('parent').getElementsByTagName('textarea').length; i++) {
console.log(document.getElementById('parent').getElementsByTagName('textarea')[i].value)
}
editing since it HTML collection in fact does not work with .value
You want something like this?(Write text and click outside)
document.getElementsByTagName('textarea')[0].onchange = function(){ console.log(document.getElementsByTagName('textarea')[0].value);
}
<textarea></textarea>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I have multiple html elements with same class name i want to know which element clicked in pure javascript
link a
link a
link a
in javascript i tried a lot of solutions but all i found working with one element only
what i wrote so far
var dd = document.getElementsByClassName('messages-email');
dd.onclick() = function(ee){
// if i clicked the first link i want to get data-wow which is 1
// and if i clicked the third one i wanna get data-wow which is 3
console.log('i want the clicked elemet attribute ')
}
There are a few issues with your code:
There is no element with the class message-email in your markup. I suppose it's simply a mistake when you're attempting to demonstrate your markup, and that you are referring to the anchor elements with the wow class
document.getElementsByClassName returns a Node collection. You will have to iterate through the collection in order to bind the click event. You can use Array.prototype.forEach.call(<NodeCollection>, function(element) { ... }) to iterate through your node collection
Do not use .onclick to bind click event, as that will override any onclick handlers. You should be using .addEventListener('click', function() {...}) instead
In order to access data-wow attribute, use the HTML5 dataset API
With that in mind, here is a proof-of-concept example:
var dd = document.getElementsByClassName('wow');
Array.prototype.forEach.call(dd, function(element) {
element.addEventListener('click', function() {
console.log('data-wow value is: ' + element.dataset.wow);
});
});
link a
link a
link a
Bonus: If you are familiar with ES2015 (aka ES6), there is an even easier way to do this:
const dd = document.getElementsByClassName('wow');
Array.from(dd).forEach(element => {
element.addEventListener('click', () => {
console.log('data-wow value is: ' + element.dataset.wow);
});
});
link a
link a
link a
This question already has answers here:
Get value of div content using jquery
(6 answers)
Closed 6 years ago.
I am new to JQuery and dynamically appending a value to an h1 element using a span element
<h1>Height: <span class="height"></span></h1>
Now I want to take the value of the span element and use it somewhere else. I tried doing this in JQuery but it's no good.
var height = $(".height").val();
What is the right way instead?
A span element doesn't have a "value", form elements do. (input, select, etc.) If you're looking to get the text of the span element, you can do that like so:
var height = $(".height").text();
Note: If there are multiple matching elements, this will concatenate the text of all of them. Observe.
change your code like this:
var height = $(".height").text();
note:
val ( ) -> for input element(like: textarea, input etc.)
Please use this.
Var height=$(".height").text();
This question already has answers here:
How to get a DOM Element from a jQuery selector?
(4 answers)
jQuery get DOM node? [duplicate]
(1 answer)
Closed 9 years ago.
So I am working with css animations, and in javascript you can start one and stop one with the following code:
element.style.webkitAnimationPlayState="paused";
element.style.webkitAnimationPlayState="running";
now I have some Jquery that looks as such:
$(".info").click(function(){
$it = $(this).closest(".thing");
//how can I use the above javascript on the specified jquery element?
});
my question is in the comment in the code. Is this possible? and how?
here is a jsfiddle showing how it is not working
here $lt is a jQuery wrapper object, not a dom element reference, you can get the dom element reference using the index 0
$it[0].style.webkitAnimationPlayState="running";
Demo: Fiddle
or use the .css() provided by jQuery to set the style value
$it.css('webkitAnimationPlayState', 'running');
Demo: Fiddle
If you want to pause an animation (and then resume from the point that it was paused) you could toggle it's play state with this CSS property:
.paused {
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state: paused;
}
You could then use jquery to toggle the paused class:
$(".info").click(function(){
$it = $(this).closest(".thing");
$it.toggleClass("paused");
});
$it is an array. So if it contains only one element, you can do,
$it[0].style.webkitAnimationPlayState="running";
and if $it contains more than one element and you want to apply this style to each element then,
$($it).each(function(){this.style.webkitAnimationPlayState="running";});
You can use CSS property of jquery element to do this.
$(".info").click(function(){
var $it = $(this).closest(".thing");
alert($it.text());
$it.css({"webkitAnimationPlayState":"running"});
});
DEMO: