Removing divs without removing their content in plain Javascript [duplicate] - javascript

This question already has answers here:
How to remove only the parent element and not its child elements in JavaScript?
(13 answers)
Closed 5 years ago.
Could anyone help me on how I can remove div tags without removing their content in JavaScript?
This is my html from which I need to remove all div tags:
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
Expected output would be like shown below.
<p>some text
<label> Test content </label>
</p>
<span>some text</span>
<label> Test content </label>
<a href=https://twitter.com/realDonaldTrump/status/882186896285282304 target=_blank rel=noopener>creepiness</a>


1.Using pure java-script:-
var divs=document.getElementsByTagName('div');
var counter = divs.length-1;
for(i=counter;i>=0;i--){
divs[i].outerHTML = divs[i].innerHTML;
}
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
2.You can use jQuery unwrap() also:-
$(document).ready(function(){
$('div').contents().unwrap();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>


Using cutting edge technology such as iterable nodelists and replaceWith, it's really straightforward with the plain DOM API:
for (const div of document.querySelectorAll("div"))
// alternatively: Array.from(document.getElementsByTagName("div"))
div.replaceWith(...div.childNodes);


you can use unwrap function.
$('div').children().unwrap();
If you want to do in plain javascript. You can get a list of all divs using document.getElementsByTagName("div"), but you will need to unwrap these divs in reverse order. This is a nodelist so reverse() will not work on it, so you can first use [].slice.call() on it which gives you an array and then you can reverse it. Then in the array unwrap each element.
you can do something like this:
var elements = [].slice.call(document.getElementsByTagName("div"), 0).reverse();
elements.forEach(function(el){
el.outerHTML = el.innerHTML;
});
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>

Related

How to target an id inside of a div class when I hover a different parent div class with jquery?

So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.
Here's my code:
HTML
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
Jquery
('.button1').mouseover(function(event) {
$(".text").attr('id');
})

With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].
Note few bug fixes:
('.button1').mouseover is missing $
You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element
$('.button1').mouseover(function(event) {
console.log($(this).find('.Score').attr('id'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>

Append div in labels as helper text. With in each radio group and its wrapper div

fiddle link
I want to append a div in labels as helper text. within each radio group and its wrapper div.
I have a radio buttons group code generated dynamically, so I can't add static helper text to labels using HTML.
I am placing div under radio group div and adding div with helper text and wrapping each radio group with another div, then using append. I am adding its only helper text div to its labels using classes.
before screen before
After screen after
<div class="helperTextWrapper" >
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText2">No</label>
</span>
</div>
</div>
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
<div class="RadioButtonHelperTextLabel2">no helper text</div>
</div>
<div class="helperTextWrapper" >
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText2">No</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText3">Not sure</label>
</span>
</div>
</div>
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
<div class="RadioButtonHelperTextLabel2">no helper text</div>
<div class="RadioButtonHelperTextLabel3">not sure helper text</div>
</div>
I want to Append Yes helper text into Yes using jQuery like this but my script is adding multiple/duplicate divs:
$("div.helperTextWrapper ").each(function(index) {
$(this).find('.RadioButtonHelperTextLabel1').appendTo('.RadioButtonHelperText1');
$(this).find('.RadioButtonHelperTextLabel2').appendTo('.RadioButtonHelperText2');
$(this).find('.RadioButtonHelperTextLabel3').appendTo('.RadioButtonHelperText3');
});
<div class="helperTextWrapper" >
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText2">No
<div class="RadioButtonHelperTextLabel2">no helper text</div>
</label>
</span>
</div>
</div>
</div>
<div class="helperTextWrapper" >
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText2">No
<div class="RadioButtonHelperTextLabel2">no helper text</div>
</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText3">Not sure
<div class="RadioButtonHelperTextLabel3">not sure helper text</div>
</label>
</span>
</div>
</div>
</div>
````

$("div.radioTable").each(function() {
$(this).parents(".helperTextWrapper").each(function(index) {
$(this).find('.RadioButtonHelperTextLabel1').appendTo('.RadioButtonHelperText1');
$(this).find('.RadioButtonHelperTextLabel2').appendTo('.RadioButtonHelperText2');
$(this).find('.RadioButtonHelperTextLabel3').appendTo('.RadioButtonHelperText3');
});
});

$(".RadioButtonHelperTextLabel1 ").each(function() {
$(this).appendTo('.RadioButtonHelperText1');
});
$(".RadioButtonHelperTextLabel2 ").each(function() {
$(this).appendTo('.RadioButtonHelperText2');
});
$(".RadioButtonHelperTextLabel3 ").each(function() {
$(this).appendTo('.RadioButtonHelperText3');
});
```

add a tag to each div using jQuery

This is the current code:
<div class="main-wrap">
<div class="inner-wrap">
some content here
<span>
test1
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test2
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test3
</span>
</div>
</div>
I need to fetch the href attr of a tag within span tag and insert it to the whole inner-wrap element. Something like this:
<div class="main-wrap">
<div class="inner-wrap">
<a href="1">
some content here
<span>
test1
</span>
</a>
</div>
<div class="inner-wrap">
<a href="2">
some content here
<span>
test2
</span>
</a>
</div>
<div class="inner-wrap">
<a href="3">
some content here
<span>
test3
</span>
</div>
</a>
</div>
I can fetch the href tag of each a tag but I'm confuse as to how to append it to the each inner-wrap divs. This is what I've done by far:
$('.inner-wrap').each(function(){
$this = $(this);
$fetchLink = $this.children('span').find('a').attr('href');
console.log($fetchLink);
});
I know this is really very simple but I can't get to work around. Can someone please help?
here's working jsfiddle

You can use wrapInner(), However, You should not nest anchor inside another anchor element.
$('.inner-wrap').wrapInner(function(i) {
var $this = $(this);
var a = $this.children('span').find('a');
var href = a.attr('href');
//Remove inner anchor
a.replaceWith(a.text());
return "<a href='" + href + "'></a>";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrap">
<div class="inner-wrap">
some content here
<span>
test1
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test2
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test3
</span>
</div>
</div>

This isn't going to work very well because you can't have a link within a link, but the general idea is to replace the $.html() of .inner-wrap with it's $.html() wrapped in an a tag with $fetchLink as the href attribute.
$('.inner-wrap').each(function() {
$this = $(this);
$fetchLink = $this.children('span').find('a').attr('href');
$this.html(''+$this.html()+'');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrap">
<div class="inner-wrap">
some content here
<span>
test1
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test2
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test3
</span>
</div>
</div>

Is there a way for me to run jquery functions on a child of an element? [duplicate]

This question already has answers here:
How to get the children of the $(this) selector?
(19 answers)
Closed 6 years ago.
I'm totally new to jQuery so I might've missed something here.
Let's say the html looks something like this:
<div class = "parent">
<div class = "child">
<div class = "message">
text
</div>
</div>
<div class = "child">
<div class = "message">
text
</div>
<div class = "message">
text
</div>
<div class = "message">
text
</div>
</div>
<div class = "child">
<div class = "message">
text
</div>
<div class = "message">
text
</div>
</div>
</div>
I'd like to be able to access each "message" div within the scope of the "child" div, instead of just using this to iterate through each "message" class element:
$('.message').each(function(index, e) {});
I understand that I can get each jquery object using this, but want to then filter through using the code above to get each text within the scope of its parent class.
var message = $('.child');

Use $(PARENT CHILD) selector(Space in between them)
console.log($('.child .message').get())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parent">
<div class="child">
<div class="message">
text
</div>
</div>
<div class="child">
<div class="message">
text
</div>
<div class="message">
text
</div>
<div class="message">
text
</div>
</div>
<div class="child">
<div class="message">
text
</div>
<div class="message">
text
</div>
</div>
</div>

Search for an item with a common ancestor

I have this html:
<div>
<div><!-- all div without ID -->
<span>some text</span>
<div>
<span id="listener1">click here</span>
<span>sometext</span></div>
<div>
<span class="FIND_ME">Result Here</span></div>
</div>
<div>
<span>some text</span>
<div id="div1">
<div id="div2">
<span id="listener2">click here</span>
<span>sometext</span></div>
</div>
<div>
<span class="FIND_ME">Result Here</span></div>
</div>
</div>
Should be the following logic: wheen I click on "click here" the element with class "FIND_ME" should hide, which is the nearest common ancestor with the button pressed. Is it possible to do this?
$("#listener1").click(function(){
$(this).<SUPER_SEARCHING>.hide(); // for example hide, or add some CSS class
});

You can find closest div that has element .find_me in it:
$("#listener1").click(function(){
$(this).closest('div:has(.FIND_ME)').find('.FIND_ME').hide();
});
Working Demo

Categories

Resources