I am trying to select an element with 'Selector name' and then delete it.
But I am unable to select the element :
Chrome give me Selector :
body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)
To select it I tried to use :
document.querySelector("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)")
Which return null
and
document.querySelectorAll("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)")
Which return NodeList[] I bet this is a good return
So I tried this way to delete this element :
var ChromeSelector = document.querySelectorAll("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)");
ChromeSelector.parentNode.removeChild(ChromeSelector)
but it does not work... Am I missing something ?
var ChromeSelector = document.querySelectorAll("body > section > div > div > div:nth-child(1)");
alert(ChromeSelector)
ChromeSelector.parentNode.removeChild(ChromeSelector)
<section MySectionTest>
<div _Firstdiv class="container">
<div _Seconddiv class="Column">
<div FirstSectionElement class="section">
<h1 _ngcontent-kwd-c95="">Test</h1>
</div>
<div FirstSectionElement class="section">
<h1 _ngcontent-kwd-c95="">Test2</h1>
</div>
</div>
</div>
</section>
The answer was thank you #Quentin :
var ChromeSelector = document.querySelectorAll("body > section > div > div > div:nth-child(1)");
ChromeSelector[0].remove();
Related
This question already has answers here:
compare two input values in input validation html javascript?
(3 answers)
Closed 5 months ago.
I have this vars:
var LC = $('#a').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").value,
ES = $('#b').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").value,
VK = $('#c').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").value,
SPY = $('#d').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").value,
CL = $('#e').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value;
I noticed that whenever there were 2 digits each variable returns true or false correctly. But when I get to the hundreds, the variables return false wrongly (I think).
For example for the var CL if $('#e').text() equals 64 and document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value equals 3 returns true.
But if the first returns 164 and the second still 3 will return false.
I can't understand why. Tried to google it but I didn't find anything. I may not be looking for the right terms tho (sorry).
My javascript is not excellent, I learned it myself to automate some things that make my life easier. If anyone can help me, I'd be very grateful.
Cast the input values and text content to integers.
You can achieve this various ways:
+str
parseInt(str)
Number(str)
var LC = +$('#a').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").val(),
ES = +$('#b').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").val(),
VK = +$('#c').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").val(),
SPY = +$('#d').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").val(),
CL = +$('#e').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").val();
console.log([LC, ES, VK, SPY, CL].every(v => v === true)); // All eval to true
*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
input[type="text"] { width: 4em; text-align: center; }
.container { display: flex; gap: 0.25em; margin-left: 0.5em; }
.container div { text-align: center; width: 3.25em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="a">1</div>
<div id="b">101</div>
<div id="c">1001</div>
<div id="d">10001</div>
<div id="e">100001</div>
</div>
<div id="content_value">
<div></div>
<div></div>
<div>
<div>
<form>
<table>
<tbody>
<tr></tr>
<tr>
<td></td>
<td></td>
<td><input type="text" value="1"/></td>
<td><input type="text" value="101"/></td>
<td><input type="text" value="1001"/></td>
<td><input type="text" value="10001"/></td>
<td><input type="text" value="100001"/></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
While it's true that 164 > 3 resolved to true, '164' > '3' resolves to false.
You need to convert these strings to numbers first. Consider using parseInt for that, if they're guaranteed to be integers. You could also use parseFloat or the Number constructor to convert a string to a number:
parseInt('164', 10); // 164
parseFloat('164'); // 164
Number('164'); // 164
I want to create loop on JS:
for(let i=0;i<3;i++){
document.querySelector("#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(i) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)")
}
div:nth-child(i) - when i is changing
so the result will be:
document.querySelector("#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(0) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)")
document.querySelector("#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(1) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)")
document.querySelector("#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(2) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)")
The ` instead of " let you do string interlopation: (And then use ${i})
for(let i=0;i<3;i++){
document.querySelector(`#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(${i}) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)`)
}
I'm want to change that
<td rowspan="2"><img src="/ORegMx/capito.png" alt="capito"></td>
to that
<td rowspan="2"><div id="divPage"><img src="/ORegMx/capito.png" alt="capito"></div></td>
i tried
var elem = document.createElement("div");
elem.setAttribute("id", "divPage");
document.querySelector("body > table.troisbords > tbody > tr > td > table > tbody > tr > td > div > blockquote > table > tbody > tr:nth-child(2) > td > form > table > tbody > tr:nth-child(4) > td:nth-child(2) > img").appendChild(elem);
but it gives
Also tried
var str = '<div id="divPage"><img src="/ORegMx/capito.png"/></div>';
document.querySelector("body > table.troisbords > tbody > tr > td > table > tbody > tr > td > div > blockquote > table > tbody > tr:nth-child(2) > td > form > table > tbody > tr:nth-child(4) > td:nth-child(2)").replaceWith(str);
but it gives
Appreciate any help !
Your code tries to put the div inside the img, but you've said you want the div to wrap the image. To do that, you need to:
Add the div to the img's parent, just before (or after) the img, and then
Move the img into the div
For instance:
var div = document.createElement("div");
div.id = "divPage";
var img = document.querySelector("body > table.troisbords > tbody > tr > td > table > tbody > tr > td > div > blockquote > table > tbody > tr:nth-child(2) > td > form > table > tbody > tr:nth-child(4) > td:nth-child(2) > img");
var parent = img.parentNode;
var next = img.nextSibling;
div.appendChild(img);
parent.insertBefore(div, next);
When you append the img to the div, it's moved (not copied).
(Also note that you can use the reflected property for id, you don't need setAttribute.)
Live Example:
var div = document.createElement("div");
div.id = "divPage";
var img = document.querySelector("#the-img");
var parent = img.parentNode;
var next = img.nextSibling;
div.appendChild(img);
parent.insertBefore(div, next);
#divPage {
border: 1px solid black;
}
<img id="the-img" src="https://via.placeholder.com/100x100.png?text=The%20Image">
I'm new in using Nightwatch and I need help with the following:
I need to check which cell on a name column on a table is equal to a text for example name3
Here's my script for the following but it's not working
var name3 = client.globals.item3.name
for (i = 1; i <=10; i++){
client.getText("#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child("+ i +") > div > div:nth-child(4) > div > div > a > span", function(result) {
client.expect.element("#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child("+ i +") > div > div:nth-child(4) > div > div > a > span").text.to.equal(name3);
client.verify.elementPresent('#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child('+ i +') > div > div:nth-child(4) > div > div > a')
client.verify.containsText('#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child('+ i +') > div > div:nth-child(4) > div > div > a', name3)
i = 11;
});
}
This is all because of asynchronous behavior of nodejs.
Try this
function test(i) {
var name3 = client.globals.item3.name
client.getText("#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child(" + i + ") > div > div:nth-child(4) > div > div > a > span", function (result) {
client.expect.element("#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child(" + i + ") > div > div:nth-child(4) > div > div > a > span").text.to.equal(name3);
client.verify.elementPresent('#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child(' + i + ') > div > div:nth-child(4) > div > div > a')
client.verify.containsText('#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child(' + i + ') > div > div:nth-child(4) > div > div > a', name3)
});
while (j <= 10) {
test(j);
j++;
}
}
Let me know if it works
I have links on a page that I wanted to add an ID Anchor too. This code I have works fine:
window.onload = function() {
$('#main > div > ul > li > a').attr('href',function(i,str) {
return str + '#myAnchor';
});
};
But sometimes because of the way the page is set up tracking gets added to the links so what is happening at the moment is I get http://www.myurl.com/#someannoyingtracking#myAnchor which doesn't anchor. How can I insert the anchor in between the URL or always after the ".com/" Like this: http://www.myurl.com/#myAnchor#someannoyingtracking
This will insert an anchor before an annoying tracking anchor or at the end of the URL:
$('#main > div > ul > li > a').attr('href', function(i,str) {
return str.replace(/(\#.+)|($)/, '#myAnchor$1');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div>
<ul>
<li>Has anchor
<li>No anchor
</ul>
</div>
</div>
Piggybacking on Rick Hitchcock's answer, but regex-free:
$('#main > div > ul > li > a').each(function(index, elem) {
elem.hash = '#myAnchor' + elem.hash;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div>
<ul>
<li>Has anchor
<li>No anchor
</ul>
</div>
</div>
You can use replace for that:
window.onload = function() {
$('#main > div > ul > li > a').attr('href',function(i, str) {
if (str.indexOf('#') > -1) {
return str.replace('#', '#myAnchor');
} else {
return str + '#myAnchor';
}
});
};