So I have some HTML that looks like this:
<div class="spinning-items">
<div>
<ul>
<li>
Hello, How Are You?
</li>
</ul>
</div>
</div>
I need to remove all the elements inside the "spinning-items" - div, but keep it's contents. In this case "Hello, How Are you?".
So, I want it to look like this afterwards:
<div class="spinning-items">
Hello, How Are You?
</div>
Can anyone please point me in the right direction, or perhaps help me with a working solution?
Thank you in advance.
Try following
$(".spinning-items").html($(".spinning-items").text().trim())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinning-items">
<div>
<ul>
<li>
Hello, How Are You?
</li>
</ul>
</div>
</div>
In case there are more than 1 element with class spinning-items
$(".spinning-items").each((i,e) => $(e).html($(e).text().trim()))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinning-items">
<div>
<ul>
<li>
Hello, How Are You?
</li>
</ul>
</div>
</div>
<div class="spinning-items">
<div>
<ul>
<li>
Hello, How Are You Doing?
</li>
</ul>
</div>
</div>
With native javascript you can do this using regex and trim() to remove white space
let k = document.getElementsByClassName('spinning-items')[0].innerHTML;
var rex = /(<([^>]+)>)/ig;
document.getElementsByClassName('spinning-items')[0].innerHTML = k.replace(rex, "").trim();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinning-items">
<div>
<ul>
<li>
Hello, How Are You?
</li>
</ul>
</div>
</div>
$(".spinning-items"")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text(); //get the text of element
this will give you only text
Related
I've created this very simple structure just to describe what I want to do, let's say all the text in the name class is rendered, and I'm trying to find a way to make all the text in that class dynamically inserted into each #link, but without overwriting the name but concatenating, it would look like this test 02 Hulk and Test 02 Deadpool
jQuery('#link').append(jQuery('.name').text());
<nav class="navigation">
<ul id="navigation-item">
<li class="first">
<a class="name"> Hulk</a>
<ul>
<div>
<li>
<p>
test 00
</p>
</li>
<li></li>
<li>
<p>
test 01
</p>
</li>
<li>
<p>
<a id="link">test 02</a>
</p>
</li>
</div>
</ul>
</li>
<li class="second">
< a class="name"> Deadpool <a/>
<ul>
<div>
<li>
<p>
test 00
</p>
</li>
<li></li>
<li>
<p>
test 01
</p>
</li>
<li>
<p>
<a id="link">test 02</a>
</p>
</li>
</div>
</ul>
</li>
</ul>
</nav>
I created this structure as an example but it didn't work, because it takes the name Hulk and Deadpool and inserts everything together
The first thing you need to do is correct your HTML. Firstly you cannot have mulitiple elements in the DOM with the same id attribute. They need to be unique. In this case you are looking to group the elements so use a common class instead.
Secondly you cannot have a div as a child of a ul element, remove it.
Lastly, the correct closing tag for an a element is </a>, not <a/>.
Once that's been corrected the jQuery to do what you require will simply need to loop over the .link elements and append the text from their related a element. Try this:
jQuery($ => {
$('.link').each((i, el) => {
$(el).append(` ${$(el).closest('ul').prev('a').text()}`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation">
<ul id="navigation-item">
<li class="first">
<a class="name">Hulk</a>
<ul>
<li><p>test 00</p></li>
<li></li>
<li><p>test 01</p></li>
<li><p><a class="link">test 02</a></p></li>
</ul>
</li>
<li class="second">
<a class="name">Deadpool</a>
<ul>
<li><p>test 00</p></li>
<li></li>
<li><p>test 01</p></li>
<li><p><a class="link">test 02</a></p></li>
</ul>
</li>
</ul>
</nav>
Array.from($(".link")).forEach(function(elem, index){
$(elem).append($(".name").eq(index).text());
})
Just replace id with name attribute since W3C recommends creating a single element with an id.
I have the following html code:
<div class="account-type">
<h3>Assets</h3>
<ul> ...lots of data in here... </ul>
<div class="account-type">
<h3>Liabilities</h3>
<ul> .... lots of elements in here... </ul>
How do I isolate the div tag with the class of "account-type" that is the direct parent of the h3 tag with the text "Liabilities"? I need to isolate it and then loop through all of the elements in it's ul tags.
Assuming <ul> should come after <h3>, you can use this combination:
:contains
:next
children
function getItemByTitle( title ){
return $(`h3:contains("${title}")`).next('ul').children()
}
var listItems = getItemByTitle("Liabilities")
console.log(listItems.length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="account-type">
<h3>Assets</h3>
<ul></ul>
</div>
<div class="account-type">
<h3>Liabilities</h3>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
There is no text match in DOM so need to select all the elements, look to see if the text matches. If it does select the parent.
const h3 = Array.from(document.querySelectorAll(".account-type > h3")).find(elem => elem.textContent.trim() === 'Liabilities');
console.log(h3)
const div = h3.closest(".account-type");
console.log(div);
const lis = div.querySelectorAll("ul li");
console.log(lis.length);
// or
console.log(h3.nextElementSibling.children)
<div class="account-type">
<h3>Assets</h3>
<ul></ul>
</div>
<div class="account-type">
<h3>Liabilities</h3>
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
Hi I have a several div elements like the one illustrated below:
<div class="div-bubble bubble">
<p>This is the text I would like to get</p>
<ul>
<li>
Yes
</li>
<li>
No
</li>
</ul>
</div>
If I click on either the yes or the no link in the li-element how can I then also get the above p-element? It must be in vanilla js.
Try below code snippet,
function linkClick(e, id){ console.log(document.getElementById(id).closest('div').childNodes[1])
}
<div class="div-bubble bubble">
<p>This is the text I would like to get</p>
<ul>
<li>
Yes
</li>
<li>
No
</li>
</ul>
</div>
I suggest you to do something like this:
(The only thing added is JavaScript, I didn't modify your HTML)
var links = document.getElementsByClassName('action-link');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
console.log(this.closest('div').getElementsByTagName('p')[0].innerHTML);
});
}
<div class="div-bubble bubble">
<p>This is the text I would like to get</p>
<ul>
<li>
Yes
</li>
<li>
No
</li>
</ul>
</div>
It's better not to use inline javascript.
Hope it helps.
First, my HTML tag is here
<ul>
<li>
<form>...</form>
<div>
<div class="A"></div>
<div class="B"><img class="wantToShow"></div>
</div>
<div class="C"></div>
</li>
<li>...</li>
</ul>
What I want to do is that when I mouse over <li>, the small image, <img class="wantToShow"> , is shown up(like hover).
But when I add event on each <li> element the following problems occur.
If I use jQuery.mouseover(<li>, function), the whole element in <li> shown up whenever I move mouse cursor in <li>.
If I use jQuery.mouseenter(<li>, function), an element, my mouse cursor enter at first, shown up. In this case, the real problem is that the event do not catch <li> but an element in <li>.
What can I do for this... Thank you!
I think something like this is what you are after:
$('li').on('mouseover',function() {
var $this = $(this);
if($('.wantToShow').is(':hidden')) {
$this.find('.wantToShow').show();
} else {
$this.find('.wantToShow').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<form>This is A</form>
<div>
<div class="A"></div>
<div class="B">
<img src='https://placebear.com/200/300' class="wantToShow">
</div>
</div>
<div class="C"></div>
</li>
<li>This is B</li>
</ul>
I would like to get the top parent element (section) of a myLI id.
My HTML code is:
<section>
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
My code is:
var x = document.getElementById("myLI").parentElement.nodeName;
My code returns UL but I would like for it to return section.
If you want to target the parent by tagName you could use .closest(selector); like :
var x = document.getElementById("myLI").closest('section');
NOTE : Take a look to the Browser compatibility section.
Hope this helps.
var x = document.getElementById("myLI").closest('section');
console.log(x.tagName);
<section>
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
var topParent = document.getElementById("myLI");
while( topParent.parentElement.nodeName != 'BODY' ){
topParent = topParent.parentElement;
}
console.log( topParent.nodeName );
<section>
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
So I'm assuming you want the element right before the 'BODY' element?
"I will probably have it execute when a user clicks a radio button or on some type of click."
Then just set up the click event on the section elements:
var sections = Array.prototype.slice.call(document.querySelectorAll("section"));
sections.forEach(function(section){
section.addEventListener("click", function(){
console.log(this.id);
});
});
<section id="one">
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
<section id="two">
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
<section id="three">
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>