This question already has answers here:
How do I select text nodes with jQuery?
(12 answers)
Closed 7 years ago.
In below code, I want to hide the "Lorem Ipsum is a dummy content" by showing the other elements inside the parent container, either by using jquery, javascript or CSS? Solution much appreciated.
<div class="someWrapper">
Lorem Ipsum is a dummy content
<div class="anotherContainer">
<p>Text goes here</p>
</div>
</div>
To do that you need to target the textNode of the .someWrapper element and remove them from the DOM. To do that you can use filter() and remove(). Try this:
$('.someWrapper').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE; // 3
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someWrapper">
Lorem Ipsum is a dummy content
<div class="anotherContainer">
<p>Text goes here</p>
</div>
</div>
You can do this with a one liner, either with plain JavaScript:
document.getElementsByClassName('someWrapper')[0].firstChild.remove();
jsFiddle example
or jQuery:
$($('.someWrapper').get(0).firstChild).remove();
jsFiddle example
You can select inner content, empty outer element and append inner ounce again:
$(document).ready(function(){
$outer = $('.someWrapper');
$inner = $('.anotherContainer');
$outer.empty();
$outer.html($inner);
});
here is fiddle: https://jsfiddle.net/woo3cgwx/
Related
This question already has answers here:
Get value of a custom attribute
(3 answers)
Closed 4 years ago.
I am trying to find the value of an element inside a div. Not the actual text of the element, but the value tag.
<div id="div">
<p value="1">Example Text</p>
</div>
I mean find the '1' of the p, not the "Example Text". Is there a way to do this, preferably without libraries? Also, I need to be able to do this without knowing the ID of the p.
You can use document.querySelectorAll('#div > *') to get all the elements inside that div, and iterate over each of them and print their text using .innerHTML
var a=document.querySelectorAll('#div > *')
a.forEach((e)=>console.log(e.innerHTML))
<div id="div">
<p id="p" value="1">Example Text</p>
</div>
This question already has answers here:
Jquery - Remove only text content from a div
(6 answers)
Closed 4 years ago.
I have
<div class="col-xs-12">
Congratulations! Here is your submitted post.
<p class="post-details">Lorem ipsum</p>
</div>
How can i remove Congratulations! Here is your submitted post. ?
I tried few things like:
$(".post-details").each(function(){
var text = $(".post-details").prev().text().remove();
console.log(text);
});
But it doesn't catch that text.
Also tried this answer but it doesn't work https://stackoverflow.com/a/1571096/1018804
Check this:
https://stackoverflow.com/a/17852238/5089697
It filters the content inside any element and find the correct node you want to remove (in your case the text which is not wrapped in any element but it is a child to the div). Try it.
You could put the text you want to delete inside a div element with an id and remove that div.
Like this:
<div class="col-xs-12">
<div id=“textToRemove”>Congratulations! Here is your submitted post.</div>
<p class="post-details">Lorem ipsum</p>
</div>
Then remove the div with jquery like so:
$("#textToRemove").remove();
here are what you want.
function Delete(){
$('#con').text('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
<p id='con'>
Congratulations! Here is your submitted post.
</p>
<p class post-details>Lorem ipsum</p>
</div>
<button onclick='Delete()'>Delete</button>
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 5 years ago.
I want to know what javascript code I can use to edit the text of this word?
This is not a duplicate because this has multiple divs in a div. And the target word is located in a div that is inside the more divs.
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
It's the 1st element that has this class...
document.getElementsByClassName('word')[0].innerHTML='Goodbye';
It's the 5th element that has this tag...
document.getElementsByTagName('div')[4].innerHTML='Goodbye';
You can use next code:
document.querySelector('.word').textContent = 'Hello World!';
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
But if you has few elements with class word, function 'querySelectror fining only first element'.If you need get many elements, you can use document.querySelectorAll --- is HTMLCollection (not array).
I don't recommend to use getElementByClassName - is very slowly method.
Method getElementsByTagName -faster that querySelectorAll , but it use only tagName. getElementById -is the fastest menthod finding of elements.
But that method find only first element with current ID.
This question already has answers here:
Why does some of my text within html paragraph tag fall outside of the <p></p>when in browser
(3 answers)
Closed 7 years ago.
I was just testing something and noticed that text inside pre tag does not appear if you access it using parent element.
Following is the code example:
JSFiddle
(function() {
var _innerText = document.getElementById("content").innerText;
var _innerHTML = document.getElementById("content").innerHTML;
var _textContent = document.getElementById("content").textContent;
console.log(_innerText, _innerHTML, _textContent)
console.log($("#content").text());
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="content">
p text
<pre>Pre text</pre>
<small>small text</small>
</p>
I also noticed that anything after it is also not fetched. If you move small before pre, text appears. What could be the reason for it?
You cannot nest block-level elements, such as <pre>, inside <p> in HTML. Your code block rendered as following in browser.
<p id="content"> p text </p>
<pre>Pre text</pre>
<small>small text</small>
<p></p>
You can use div instead of p.
Because you can't put "pre" in "p" tag, try "div":
<div id="content">
p text
<pre>Pre text</pre>
<small>small text</small>
</div>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
My dynamic posts are added by .load() and they enter the DOM as such:
<div class="post">
<h2>Basic Info</h2><button class="closer">X</button>
<div class="innerPost">
<h5>Notes:</h5>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
My jQuery to remove the the post works on the static first post on the page but not the newly added dynamic ones. Here is the jQuery:
$(".closer").on('click', function() {
$(this).parent().remove();
});
I've been trying different selectors and reviewing similar problems from other people but still can't seem to get it work. Any help is much appreciated :)
This is because the elements are not in the DOM when the selector is run. Use event delegation.
$(document).on('click', ".closer", function() {
$(this).parent().remove();
});