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>
Related
This question already has answers here:
Make part of contentEditable unable to delete
(3 answers)
Closed 3 years ago.
Is it possible to disable deleting an element from contenteditable. I have the following markup and when user presses backspace or delete key if cursor is next to image element I want the image not to be deleted and cursor to move to prev/next char, Using pure JavaScript HTML CSS and not jQuery.
<div id="content" contenteditable="true">
some text and //user can delete this
<img id="img" src="someimg.gif"/> //user can't delete this
more text // user can delete this
</div>
Try to split contenteditable into two parts.
something like this:
<div id="content">
<p contenteditable="true">
some text and
</p>
<img id="img" src="someimg.gif"/>
<p contenteditable="true">
more text
</p>
</div>
Hope this answers your question
just separate them :)
<div id="content" contenteditable="true">
//user can delete this
</p> some text and</p>
</div>
<img id="img" src="someimg.gif"/>
//user can't delete this, also add display
//inline-block to this in the CSS so it doesn't go down
<div id="content" contenteditable="true">
// user can delete this
<p> more text </p>
</div>
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:
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 4 years ago.
I am trying to understand event bubbling, while try with my own code:
`
<!DOCTYPE html>
<html>
<body>
<div onclick="alert('1')">
1
<div onclick="alert('2')">
2
<div onclick="alert('3')">3</div>
</div>
</div>
</body>
</html>
Here I saw that, when click div 3, it shows three alert (3 2 1). After I change the first div tag to P tag, I click that same div 3 it come up with only two alert (3 2). Here, why alert 1 is not coming since it is under the parent(P) tag.
After change first div tag to P tag, code looks like below:
<p onclick="alert('1')">
1
<div onclick="alert('2')">
2
<div onclick="alert('3')">3</div>
</div>
</p>
Simply because the browser will fix your mistake in layering yout HTML markup.
The closing </p> tag is inserted where appropriate (before the block-level DIV) since <div> is not an allowed descendant of <p>.
The resulting markup is:
<p onclick="alert('1')">
1
</p>
<div onclick="alert('2')">
2
<div onclick="alert('3')">3</div>
</div>
<p></p>
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:
How can I find elements by text content with jQuery?
(8 answers)
Closed 6 years ago.
I have a kind of unique need of finding one div on all divs with same class name that has a specific copy, and return the entry number:
<div class="alertme"></div>
<div class="alertme"></div>
<div class="alertme">This text</div>
<div class="alertme"></div>
So it would return 2, being 0 is the first div.
I'm not sure if that what you want, but to get the index of the div that has the This text text you could use :contains selector with .index() method :
$('.alertme:contains("This text")').index();
Hope this helps.
console.log($('.alertme:contains("This text")').index());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alertme"></div>
<div class="alertme"></div>
<div class="alertme">This text</div>
<div class="alertme"></div>