select content of div with DOM, but without child

select content of div with DOM, but without child - javascript

there is HTML code:
<div id="parent">
<p>111111</p>
<div id="child">
<p>22222</p>
<div id="childer">
<p>33333</p>
</div>
</div>
</div>
i want only select "22222" in paragraph of div with id=child.
but when use document.getElementById("child").textContent it return "22222" and "33333".
i dont want use jQuery, can anyone help me?
thanks

You can use querySelector(), more info here.
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
var value = document.querySelector('#child p').textContent;
console.log(value);
<div id="parent">
<p>111111</p>
<div id="child">
<p>22222</p>
<div id="childer">
<p>33333</p>
</div>
</div>
</div>

You can try using querySelector() which allows CSS like selector (#child p):
var elText = document.querySelector("#child p").textContent;
console.log(elText);
<div id="parent">
<p>111111</p>
<div id="child">
<p>22222</p>
<div id="childer">
<p>33333</p>
</div>
</div>
</div>

const setup = () => {
const child = document.querySelector('#child');
const p = child.querySelector('p');
console.log(p.textContent);
};
//load
window.addEventListener('load', setup);
<html>
<body>
<div id="parent">
<p>111111</p>
<div id="child">
<p>22222</p>
<div id="childer">
<p>33333</p>
</div>
</div>
</div>
</body>
</html>

document.getElementById("child").getElementsByTagName('p')[0].innerText;

Related

How to add and remove class dynamically to child div based on value in Jquery

if data value is matching with any div inside requestsampler class then dynamically add new class(sampleClass) to test class inside the matching container
js:
var data = **somevalue**;
data is dynamic value
html:
<div class="requestsampler">
<div class= "**somevalue**">
<div class="test"> // add new class <div class="test sample class">
//
</div>
</div>
<div class= "somevalue2">
<div class="test">
//
</div>
</div>
<div class= "somevalue3">
<div class="test">
//
</div>
</div>
</div>
tried not working:
$('.requestsampler').hasClass(data) {
$(.'requestsampler .`${data}` .test').addClass('sampleclass');
}

You could simply use Attribute Contains Prefix Selector [name|="value"] for more info please refer http://jqapi.com/#p=attribute-contains-prefix-selector.. below is the code for your example.
$(document).ready(()=>{
var data = "somevalue"; $('div[class|="'+data+'"]>.test').addClass("sampleclass");
})
.sampleclass{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="requestsampler">
<div class= "somevalue">
<div class="test"> // add new class <div class="test sample class">
//
</div>
</div>
<div class= "somevalue2">
<div class="test">
//
</div>
</div>
<div class= "somevalue3">
<div class="test">
//
</div>
</div>
</div>

you could try jquery elem.find() api. And also use className with string and numeric combination instead of symbols
i have changed the condition with element find length. Because hasClass() only perform on the selector element. So if you are using find() they will find the matched element.
And also your if condition does not make any sense, without condition is also working same
Updated
If you need first test element. use .eq(0) or else use different className for the first test element
var data = "somevalue";
if ($('.requestsampler').find(`.${data}`).length > 0) {
$('.requestsampler').find(`.${data}`).find('.test').eq(0).addClass('sampleclass');
}
.sampleclass {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="requestsampler">
<div class="somevalue">
<div class="test"> // add new class
<div class="test sample class">
sample
</div>
</div>
<div class="somevalue2">
<div class="test">
//
</div>
</div>
<div class="somevalue3">
<div class="test">
//
</div>
</div>
</div>

How to detach and append to relevant div only jQuery

I am trying to detach the div from the relevant parent and then append to the same parent div.
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
var copyDivData = jQuery('.variations_form.wvs-archive-variation-wrapper').detach();
copyDivData.appendTo('.product-variations');
}
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Expected result.
But after running the above code I am getting the following result.

.detach Description: Remove the set of matched elements from the DOM.
That means you append all the detached elements to every product-variations element ..So
You need to loop through the variations_form.wvs-archive-variation-wrapper elements by using .each()
Also you can use .appendTo() directly
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
jQuery('.variations_form.wvs-archive-variation-wrapper').each(function(){
var product_variations = jQuery(this).next('div').find('.product-variations');
jQuery(this).appendTo(product_variations);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 1
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 2
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Note: This line of code var product_variations = jQuery(this).next('div').find('.product-variations'); is depending on your html structure it works for the posted html here .. But if you've another html structure you need to modify it to catch the desired element

Find the index of a div inside a container

I have a container with multiple divs and in each div I have a handler on which you can click.
The requirement is to return the index of the div in the container for further processing.
I've simplified the code for readability purposes.
The HTML:
<div class="container">
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
</div>
The Javascript code I tried so far but I always get -1 as the index:
$(document).ready(function(){
$('.handler').click(function(e) {
let index = Array.prototype.indexOf.call($('.container'), $(this).parents('.block'));
console.log(index);
});
});
I also created a fiddle.
So what am I doing wrong here?

You can do the following,
$('.handler').click(function(e) {
var el = e.target;
console.log([].indexOf.call(el.parentNode.parentNode.children, el.parentNode));
});
However if you want to know what was wrong in your code,
Array.prototype.indexOf.call($('.container')[0].children, $(this).parents('.block')[0])
This part should fix the problem in your code. You have been doing it all right, but for the parameter of indexOf we needed the children array of .container and clicked element.
You were passing the container element and current clicked element as an array. That is Array.prototype.indexOf.call('[Container Element]', ['current clicked div']) Which is not right. You should pass something like this,
Array.prototype.indexOf.call('[children, children, children...]', 'current clicked div element').
It was happening because the $('.container') returns an array with the element having a class name .container. But we needed all the children array of the element that contains container class.
And $(this).parents('.block') returns an array with the matching elements even if it is only one.

You can access the index using the index method on parent element of selection.
$(document).ready(function(){
$('.handler').click(function(e) {
console.log($(this).parent().index())
});
});

You can do that like this. Find the index of the closest element of the clicked element, which is also a direct child of .handler. To find index, use index().
$(document).ready(function() {
$('.handler').click(function(e) {
let index = $(this).closest('.block').index()
console.log(index);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
</div>

You're checking at the wrong level of nesting in your HTML. I believe what you're trying to do is check from one level higher, at ".container" and get the index of the ".block" element that was clicked.
This code works in your Fiddle:
$(document).ready(function(){
$('.handler').click(function(e) {
const p = e.target.parentElement.parentElement;
const index = Array.prototype.indexOf.call(p.children, e.target.parentElement);
console.log(p.className) // "container"
console.log(index)
});
});

This can be done simply using delegate in jQuery.
I modify your JSFiddle code.
$(".container").delegate('.block', 'click', function () {
console.log( $(this).index() );
})

u can use a id
<div class="container">
<div class="block">
<div id='0' class="handler">
Click
</div>
</div>
<div class="block">
<div id='1' class="handler">
Click
</div>
</div>
<div class="block">
<div id='2' class="handler">
Click
</div>
</div>
<div class="block">
<div id='3' class="handler">
Click
</div>
</div>
</div>
$(document).ready(function(){
$('.handler').click(function(e) {
let index = this.id
console.log(index);
});
});
https://jsfiddle.net/vhrt596x/2/

How to check if inner <div> has text

what I'm trying to do is to check if my inner <div> has a text for example Ended and then remove if it has a text. I have multiple <div> with the same class name. I tried using .filter(). I would like to remove the div container_one that contains the found element.
Here is my HTML:
var $filstatus = $('.status').filter(function() {
return $(this).text() == 'Ended';
});
$filstatus.remove();
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>
Thank you for the help!

I would use the jQuery's selector by content
combined with .closest(). This might be the shortest way:
$('.status:contains("Ended")', $('.main_container')).closest('.container_one').remove();
First ('.status:contains("Ended")') will select all elements that have a class status, contain the text "Ended" and are children of main_container (not needed but is recommended to speed up selection of elements on complex pages).
Then the method .closest('container_one') will climb up the parents tree for each of the elements from the previous step and select the first parent element with class 'container_one'.
At last it will remove all elements found.
Note: all those methods work both with single element and collections of elements, so no need of any for/foreach.
Working JSFiddle Demo

Pure JavaScript solution with forEach:
var div = document.querySelectorAll('.container_one');
div.forEach(function(el){
var target = el.querySelector('.status');
if(target.textContent == 'Ended'){
el.remove();
};
})
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>

Try this
$filstatus.parent().parent().remove();

filter will return an array , then use each to loop over that and delete the element. In this case it will remove that specific div but the parent div will still be in dom
var $filstatus = $('.status').filter(function() {
return $(this).text().trim() === 'Ended';
});
$filstatus.each(function(index, elem) {
$(elem).remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>

If you want to remove .container_one whose inner child has the text Ended, try
const ended = $('.status').filter((index, element) => $(element).text() === 'Ended')
ended.parents('.container_one').remove()

Since you want to remove the closest ansistor with class .container_one, you will need to use closest
$filstatus.closest(".container_one").remove();
Check this: https://jsfiddle.net/n3d5fwqj/1/
https://api.jquery.com/closest/

Try using this if you don't need $filstatus in other places
$('.status').each(function(){
if ($(this).text() == "Ended"){
$(this).parent().parent().remove();
}
})

I see your problem is you are able to remove the child div status but what you want is to remove the entire parent div with class container_one
you can use $.each for that and use closest(class_name) to remove the parent including its child
$.each($('.status'), function(idx, div) {
if ($(this).text() == 'Ended') {
$(this).closest('.container_one').remove();
}
});
Demo
or you can continue your filter and just add .closest('.container_one') to your jquery selector
var $filstatus = $('.status').filter(function() {
return $(this).text() == 'Ended';
});
$filstatus.closest('.container_one').remove();
Demo

Select elements which don't have parent class

$("#result").html($('[contenteditable]').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scorer">
<div>
<div contenteditable>1</div>
<div contenteditable>2</div>
</div>
</div>
<div>
<div contenteditable>3</div>
<div contenteditable>4</div>
</div>
<hr />
<div id="result">
result
</div>
How can I select contenteditable elements which do not have a parent up the chain of "scorer" in CSS or jquery.
Result should be 34.
Thanks!

You can use not() function like this .not('.scorer div')
$("#result").html($('[contenteditable]').not('.scorer div').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scorer">
<div>
<div contenteditable>1</div>
<div contenteditable>2</div>
</div>
</div>
<div>
<div contenteditable>3</div>
<div contenteditable>4</div>
</div>
<hr />
<div id="result">
result
</div>

You can use filter function for this
var result = $("div[contenteditable]").filter(function () {
return $(this).closest(".scorer").length == 0
}).text();
Fiddle

Try not()
$("#result").html($('[contenteditable]').parent().not('.scorer div').text());
FIDDLE

Try to fetch all except for children of scorer:
$('div[contenteditable]').not('.scorer div');

Just to give you a different approach which is the one i find more easier to read
$('.result').html($('div:not(.scorer) [contenteditable]').text());
jsfiddle

Develop Reference

JavaScript is the programming language of the Web.

select content of div with DOM, but without child - javascript

You can try using querySelector() which allows CSS like selector (#child p): var elText = document.querySelector("#child p").textContent; console.log(elText); <div id="parent"> <p>111111</p> <div id="child"> <p>22222</p> <div id="childer"> <p>33333</p> </div> </div> </div>

document.getElementById("child").getElementsByTagName('p')[0].innerText;

Related

How to add and remove class dynamically to child div based on value in Jquery

How to detach and append to relevant div only jQuery

Find the index of a div inside a container

How to check if inner <div> has text

Select elements which don't have parent class

Categories

Resources