Here is my problem:
<html>
<div id="parentdiv">
some parent value
<div id="childdiv">some child value</div>
</div>
</html>
parent div --> parent div content --> child div --> child div content --> end child div --> end parent div
I need to acquire only parent div value, without child div value. How can I do that in Javascript?
try this:
alert($('#parentdiv').clone().children().remove().end().text());
If you have control over the HTML - just wrap the value in a <p> tag (as it should be) and then access it like so..
HTML
<html>
<div id="parentdiv">
<p>some parent value</p>
<div id="childdiv">some child value</div>
</div>
</html>
jQuery
$('#parentdiv p').text();
If there are other <p> elements in the parentdiv then use a class.
just wrap it inside a span tag and get the inneHTML of that tag
This works:
var $parent = $('#parentdiv').clone();
$parent.find('#childdiv').remove();
var parentvalue = $parent.text();
Try it in this JsFiddle
Related
How can I get direct child from element section?
I've tried target it by query selector, but it didn't work. For this case I don't want to use class or id.
Am I using it correctly?
I want to target it from section.
Thanks for help.
var section = document.getElementsByTagName("section")[0];
var div = section.querySelector(section + "> div"); //this not work
<section>
<form>
<div></div>
<div></div>
</form>
<div> //I want target this div
<div></div>
<div></div>
</div>
</section>
Use query selector specifying the selector like section > div directly:
var div = document.querySelector("section > div");
console.log(div);
<section>
<form>
<div></div>
<div></div>
</form>
<div id="my-target-element"> //I want target this div
<div></div>
<div></div>
</div>
</section>
If you really want to do that on the section element, get the element and then use the query selector like below, looking directly for the child div element:
const section = document.querySelector('section');
console.log(section.querySelector('section > div'));
// or even
console.log(section.querySelectorAll('div')[2]);
<section>
<form>
<div></div>
<div></div>
</form>
<div id="my-target-element"> //I want target this div
<div></div>
<div></div>
</div>
</section>
You are concatenating section.querySelector(section + "> div") a string with and object which is not work in querySelector
BTW if you use section.querySelector("div") it will return the first div of the elements so what you want is section.querySelectorAll("div")[2] which point to third div see the example in two parts, the second one is yours.
var section = document.getElementsByTagName("section")[0];
var div = section.querySelector("div"); //this not work
console.log(div);
//What you want
var section = document.getElementsByTagName("section")[0];
var div = section.querySelectorAll("div"); //this not work
var target = div[2];
console.log(target);
<section>
<form>
<div>1</div>
<div>2</div>
</form>
<div> I want target this div
<div>3</div>
<div>4</div>
</div>
</section>
in the other side you can set an id for that div and directly find it by getElementById but from you mentioned you don't want find it by class or id.
UPDATE:
At least there should be an info about your target div to be able find it either added dynamically or statically, if you can not define class or id it is good to define and attribute like <dive attName='value'></div> or you can find it by content.
Therefore there should be a specific position for your target div it is not possible to find a div when you don't have any information about it. if that div have specific content you can iterate all div in a for and check it, but the best way is defining class or id for that div or at least defining an attribute for it.
var div = section.querySelector("section > div");
I'm looking for a way to select the first child element of multiple parent divs, of which the parent divs have the same class. This is my HTML:
<div class="wrapper">
<p>Select this paragraph</p>
</div>
<div class="wrapper">
<img src="https://picsum.photos/200/300" title="Select this image">
<p>Don't select this</p>
</div>
<div class="wrapper">
<p>Select this paragraph</p>
<p>Don't select this paragraph</p>
</div>
Please see my full CodePen Here.
I'm trying to select the first child element of each div with the class wrapper and apply the same class to all of these child elements. I was looking at something in the lines of this:
$('.wrapper').children(":first").addClass("noMargin");
The problem with this is that it only selects the child element of the first parent div, but it doesn't select the img and the first p of the third wrapper. I figured you need some kind of array for this and apply a class to all of them, but how can I achieve this (with preferably jQuery)?
You're close, what you need is to go through the elements that have the .wrapper class and append the noMargin class to their first children i.e
$('.wrapper').each(function() {
$(this).children(":first").addClass("noMargin");
});
you can use following sample it is working fine
$('.wrapper :nth-child(1)').addClass("noMargin");
or another syntax
$('.wrapper :first-child').addClass('noMargin');
Given a div with a child div
<div class='parent'>
<div class = 'child>
</div>
</div>
I can access the child with jQuery using ($(div.parent div.child)
But what if I have defined parent as
$parent=$("div.parent");
What is the syntax for accessing the child div of $parent?
you can do the following:
var $parent = $("div.parent");
$parent.children('.child');
I have a portion of a child HTML file called up inside a div using an id tag in the parent. I want to create a button to clean out the child content and return to the parent inside that div. What would the JS code be for this, for a graphic?
suppose your html is:
<div class='parent'>
<div class='innerParent'>
<input type='button' id='removeChildContent'>
<div class='child'>
</div>
</div>
</div>
so, using jQuery, you can clean the child content as below:
$(function()
{
$('#removeChildContent').click(function()
{
$(this).siblings().not(':first').remove();//removes the child elements of inner parent, except this button
})
})
I would like to insert an hr element in a different child div (2 child divs within a parent div), as per the set-up below. The insertbefore method works fine for an element within the same div but not for elements in the other child div (see code below). Is there a different method I can use to achieve this or do I want the impossible?
<body>
<div id="whole section">
<div id="group_a">
<h3 id="event_1">Heading 1</h3>
<p> some text </p>
**// I would like to insert an hr element here**
<h3 id="event_2">Heading 2</h3>
<p> more text </p>
</div>
<div id="group_b">
**// I can only insert code here though**
<script type="text/javascript">
function add_hr(){
var new_hr = document.createElement('hr');
var reference = document.getElementById('event_2');
document.body.insertBefore(new_hr, reference);
}
window.onload = function(){add_hr();};
</script>
</div>
</div>
</body>
insertBefore requires that the reference element be a direct child of the element on which you call it. Your line
document.body.insertBefore(new_hr, reference);
...tells the browser to insert new_hr before the reference element directly contained by document.body. But document.body doesn't directly contain the reference element, it's inside a div. So you get an error, because the reference element can't be found directly inside the element you're inserting into.
You can fix that by using the reference element's parent:
reference.parentNode.insertBefore(new_hr, reference);
Live Example | Source