Remove all text in parent div - keep string in children - javascript

I need to remove all text inside a div - but unsure how to do this correctly with jQuery or vanilla JS. First I was thinking of using .empty but that remove my child's string as well.
Whats the correct way to do this? The string I want to remove is is the totaal: string. This is a dynamic text so I cant target the exact word.
<span id="span2">Totaal: <em id="headercartsum">€925</em></span>

In this case you want to remove the first child node of the span element, so you can do
$('#span2').contents().eq(0).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="span2">Totaal: <em id="headercartsum">€925</em></span>
or if you want to remove all text nodes children then
$('#span2').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE;
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="span2">Totaal: <em id="headercartsum">€925</em></span>
Based on a class of em.
$('.headercartsum').map(function() {
return this.previousSibling;
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="span2">Totaal: <em id="headercartsum" class="headercartsum">€925</em></span>

You can select text node by nodeType property along with .remove() to remove it:
$('#span2').contents().filter(function() {
return this.nodeType === 3; //select text node
}).remove();
Working Demo

Select immediate children elements and make them the only content:
$(document).ready(function() {
$("#span2").html( $("#span2").children() );
})
http://jsfiddle.net/kffj63zh/

Something like this:
$('#span2').html($('#span2>*'));
https://jsbin.com/boyebeyaxe/edit?html,js,output

Related

Wrap words inside div with span (for example) tag, while the div has HTML tags inside

I want to wrap each word with span tag inside paragraph. i successfully made it when there are no HTML tags inside the paragraph. But when the paragraph has HTML tags inside, it's going mess.
Here example when no HTML tags are inside the paragraph:
$('div').html(function(i, v) {
return $.trim(v).replace(/(\w+)/g, '<i class="woord">$1</i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
11111 22222 33333 44444
</div>
But when there are HTML tags inside the paragraph, it's going mess as following:
$('div').html(function(i, v) {
return $.trim(v).replace(/(\w+)/g, '<i class="woord">$1</i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
11111 <span>22222 <small>33333</small></span> 44444
</div>
Thanks for DrunkenPoney for trying to implement that. He did the most, but it has broken the inside span content.
I want the result to be like this where every word appearing in the browser to be wrapped with <i class="woord"> as following:
<div>
<i>June</i> <span><i>10</i> <i>sssssss</i></span> <i>ggdgfdf</i>
</div>
His code result has broken the original span code structure as following:
<div>
<i class="woord">11111</i> <i class="woord"><span>22222</span></i> <i class="woord"><small>33333</small></i> <i class="woord">44444</i>
</div>
It's true that you need to traverse through all text nodes. In each text node, you can just replace all words with your desired string.
So it's quite clear about the idea. Note that searching/replacing using Regex against HTML tags is not recommended. That's why we need to deal with raw text nodes.
Also to help doing this conveniently using jQuery, we use the replaceWith method to in-place replace the text node with all returned from the Regex replacement.
Here is the detailed code:
var wrapHtml = function(textNode){
return $(textNode).replaceWith(
textNode.nodeValue
.replace(/\w+/g,"<i class='woord'>$&</i>"));
};
$("div").contents().each(function(i,e){
if(e.nodeType == 1){
var elems = [];
elems.push(e);
while(elems.length > 0){
var ce = elems.pop();
if(ce.nodeType == 1) {
$(ce).contents().each(function(j,o){
if(o.nodeType == 1) {
elems.push(o);
} else {
wrapHtml(o);
}
});
} else {
wrapHtml(ce);
}
}
} else {
wrapHtml(e);
}
});
Demo.

jQuery: How to select text between two closed html tags

I am trying to wrap the intro/help text in html document using jQuery.It is not inside any tag but between two closed html tags.
Please see attached code snippet for example. the 2nd end tag can also be other than <p>.
var txtHelp = jQuery('b.page-title').nextUntil('p').text();
console.log(txtHelp);
//jQuery('b.page-title').nextUntil('p').text().wrap("<p />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b>
How to select this text and wrap it in new P-Tag
<p align="center">This can by any html tag</p>
The nextUntil() method not selects textnodes.
You can get the text node by nextSibling property of node and get text content by textContent property of text node.
var txtHelp = jQuery('b.page-title')[0] // get the dom object
.nextSibling // get the text node next to it
.textContent; // get text content
console.log(txtHelp);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b>
How to select this text and wrap it in new P-Tag
<p align="center">This can by any html tag</p>
UPDATE 1 : If you want to wrap the element by a p tag then do it like.
$( // wrap by jquery to convert to jQuery object
$('b.page-title')[0] // get the dom element also you can use `get(0)`
.nextSibling // get the textnode which is next to it
).wrap('<p/>'); // wrap the element by p tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b>
How to select this text and wrap it in new P-Tag
<p align="center">This can by any html tag</p>
UPDATE 2 : If it contains br tag and you want to include it as a text then do something tricky using contents() method.
var get = false;
$($('b.page-title')
.parent() // get it's parent
.contents() // get all children node including text node
.filter(function() {
if ($(this).is('b.page-title')) {
get = true; // if element is 'b.page-title' then set flag true , we need to get element from here
return false // return false that we don't need the 'b.page-title'
}
if ($(this).is('p')) // check element is `p`, that we need to get element uptop tag
get = false; // update flag
return get; // return the flag for filtering
})).wrapAll('<p/>'); // use wrapAll to wrap all elements withing single tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b>
How to select this text
<br/>and wrap it in new P-Tag
<p align="center">This can by any html tag</p>
For a pure jQuery approach, you can try this:
var contents = $('b.page-title').contents(),
textNodes = contents.filter(function() { return this.nodeType === 3; });
console.log(textNodes[0].textContent);
See contents()

How to delete current element if previous element is empty in jquery?

I want to delete element with class "tehnicneinfo" but only if the element I'm checking ( with class "h2size") has no child. I have a bunch of those elements, generated by a plugin and I want to delete only the ones that have the next element without child. I wrote jquery code, but it delets all of my elements, not only the ones that have the next element without child. Here is my jquery code:
$('.news .h2size > div').each(function() {
var ul = $(this).find('ul');
if(!ul.length) $(this).remove();
var h1 = $('.news').find('.tehnicneinfo');
var h2size = $('.news').find('.h2size');
if(h2size.prev().is(':empty'))
{
h1.remove();
}
});
this code is inside $(document).ready(function(). Can you tell me what I'm doing wrong? The code is for something else also, so I'm having truble only from var h1 = $('.news').find('.tehnicneinfo'); this line on. Thanks in advance!
Html:
<div class="news">
<h1 class="tehnicneinfo">xxx</h1>
<div class="h2size">
<div id="xyxyxy">
.......
</div>
</div>
<h1 class="tehnicneinfo">yyy</h1>
<div class="h2size"></div>
....
</div>
That's the html, only that there is like 20 more lines that are the same, but with different values (not yyy and xxx). I would need to delete all 'yyy' (they are not all with same value).
You can use filter to filter the ones you want to remove then remove them
"I want to delete only the ones that have the next element without child"
$('.tehnicneinfo').filter(function(){
return !$(this).next().children().length;
// only ones with next sibling with no children
}).remove();
JSFIDDLE

Empty parent DIV but not child div

I have two divs included one in the other:
<DIV id="DIV_1">
parent_contents
parent_contents
<DIV id="DIV_2">
child_contents
child_contents
</DIV>
</DIV>
I want to remove parent_contents, but not the child_contents. When I do:
$('#DIV_1').remove();
I lose the child contents...
Filter out the textnodes and remove them :
$('#DIV_1').contents().filter(function() {
return this.nodeType === 3;
}).remove();
FIDDLE
or to leave just #DIV_2, filter out just that one element:
$('#DIV_1').contents().filter(function() {
return this.id != 'DIV_2';
}).remove();
FIDDLE
I'm pretty sure one of the easiest ways would be to copy the DIV_2 child content into a variable, then simply append it to DIV_1 after emptying it.
jsFiddle DEMO
var $temp = $('#DIV_2');
$("#DIV_1").empty().append($temp);

selecting div that contains div with a certain value

I have several outer divs, all of them contain 3 inner divs class1 class2 class3. I want to select the outer div based on the value attribute of its inner div that has class1. For example, I want to select the first div because its class1 div has value x. How do I do this with jquery?
<div> <-----this is the div I want to select
<div class="class1" value="x"></div>
<div class="class2" value="y"></div>
<div class="class3" value="z"></div>
</div>
<div>
<div class="class1" value="a"></div>
<div class="class2" value="b"></div>
<div class="class3" value="c"></div>
</div>
My first thought was:
$('.class1[value="x"]').parent();
But I wasn't sure of the syntax (edit: it works). This, however, could work as well:
$('.class1').filter(function() {
return $(this).attr("value") == "x";
}).parent();
Note however, these will only return the first parent (in the case of multiple child divs having a matching "value" attribute). If you want to do something with multiple parent matches, you could iterate through the result with $.each and look at them individually:
$('.class1[value="x"]').each(function() {
var parent = $(this).parent();
});
$('div').has('div[value=x]');
demo
$('div:has([value=x])').closest('div');
demo 2
$('div[value=x]').parents('div');
demo 3
$('div>div[value=x]').parent('div');
demo 4
$.fn.getChildVal = function(val){
$('[value='+val+']').parent().css({background:'red'});
};
$('div').getChildVal('x');
plugin :)
From the docs:
http://api.jquery.com/closest
http://api.jquery.com/has
Another way is to use :has selector
var elem = $('div:has(.class1[value="x"])');
You can do it so.
$(document).ready(function () {
$("div.class1 [value='x']").parent('div');
});

Categories