Develop Reference

i need hide an element when an especific text is showing

I want to hide the check-out button when the text "No shipping options found for" is visible. I'm selecting by query all to get some elements, after this I select the button and I apply the style display none, but it is still showing. I don't know what i'm doing wrong.
function hidenv() {
var txt = document.querySelectorAll(".shipping td")[0].innerText;
if (txt >= "No shipping options found for") {
document.querySelectorAll(".proceed-to-checkout").forEach((element) => element.style.display = "none");
}
}
<tr class="shipping">
<th>Shipment</th>
<td data-title="Shipment">
No shipping options found for <strong>xxxx, xxx, 0000</strong>.
</td>
</tr>
<div class="proceed-to-checkout">
<a href="https://nextstep.nxt/" class="checkout-button">
Proceed payment</a>
</div>

It is because no event is defined to execute function . Here hidenv() at bottom works as automatic execution on load .
Also add the word you want to match in separate container so that it can be easily retrieved and matched properly .
function hidenv() {
var txt = document.querySelectorAll(".notFound")[0].innerText;
if (txt == "No shipping options found for") {
document.querySelector(".proceed-to-checkout").style.display = "none";
}
}
hidenv();
<tr class="shipping">
<th>Shipment</th>
<td data-title="Shipment">
<span class="notFound">No shipping options found for</span><strong> xxxx, xxx, 0000</strong>.
</td>
</tr>
<div class="proceed-to-checkout">
<a href="https://nextstep.nxt/" class="checkout-button">
Proceed payment</a>
</div>

#Rana have been share a good answer but the text showing don't have any html tag. So i did this.
First select the text inside another and and later aply the display none
function hidenv() {
var txt = document.querySelector(".shipping").querySelectorAll("td")[0].innerText;
if (txt === "No shipping options found for") {
document.querySelector(".proceed-to-checkout").style.display = "none";
}
}
hidenv();
<tr class="shipping">
<th>Shipment</th>
<td data-title="Shipment">
No shipping options found for <strong>xxxx, xxx, 0000</strong>.
</td>
</tr>
<div class="proceed-to-checkout">
<a href="https://nextstep.nxt/" class="checkout-button">
Proceed payment</a>
</div>

I think depending on text inside an element is not a god idea! but if you really want to do it, this is the way!
It's better to have div inside and make it show and hide. Hiding a is not the best idea.
let theShipmentElement = $("td[data-title='Shipment']");
if(theShipmentElement.html().indexOf('No shipping options found for') > -1){
theShipmentElement.hide();
}

How to Remove a Part of String from an HTML Element using Javascript/Jquery?

I have a html element:
<p> Top Ten Miler </p>
I would like to remove string "Top Ten" from:
<p> Top Ten Miler </p>
So out should be straight:
<p> Miler </p>
How can I do it using JavaScript or jQuery on windows load?

Find p text and replace.
$('p').text($('p').text().replace('Top Ten',''));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Top Ten Miler </p>
Or if your <p>is inside any div and div have any class or id you can use that class or id.In below snippet I use class:
$('.yourclass > p').text($('.yourclass > p').text().replace('Top Ten',''));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='yourclass'><p> Top Ten Miler </p></div>

Use String.replace method
var x = 'Top Ten Miler';
var newString = x.replace('Top Ten', '');
console.log(newString.trim()) //trim to replace any white space

lets say you want to remove xxx by yyy on every node of span or p or div. This is generic code you can try.
$(document).ready(function(){
$('span[data-replace][data-replace-by]')
.each(function(i, el) {
var html = $(el).html();
var oldValue = $(el).data('replace');
var newValue = $(el).data('replace-by');
html = html.replace(oldValue, newValue);
$(el).html(html);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-replace='deepak' data-replace-by='sharma'>
this is deepak sharma
</span>
<br/>
<span data-replace='this is' data-replace-by=''>
this is deepak sharma
</span>
<br/>
<span data-replace='sharma' data-replace-by='SHARMA'>
this is deepak sharma
</span>
<br/>
<span data-replace='This'>
This will not change, as no replace-by specified.
</span>
<br/>

You can loop through each instance and replace the text you want
$('#top-tens p').each(function(index, element){
let text = $(element).text().replace('Top Ten ', '');
$(element).text(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-tens">
<p>Top Ten Miler</p>
<p>Top Ten Thriller</p>
<p>Top Ten Dealer</p>
</div>

var str = "Top Ten Miler";
var res = str.substring(7, 13);
console.log(res)

You can use String.split(), like this:
let cutVal = "Top Ten Miler"; // Or Top Ten whatever
let arryVal = cutVal.split(" "); // Split string into three parts
console.log(arryVal[2]); // Grab the third part
// output is
Miler

Get the text outside a DIV element with jQuery

I'm trying to access a page and get the value from this page.
First I don't have access to this page so I can't do any modification on the code, that's the problem because it doesn't look coded properly.
Please find an example (index.html) of the page (source)
I access this page with an ajax get method.
<div id="box" style="background-color:#000000; margin:0px;">
<b>
<big>
<span style="color:#00BB77;">Tue, 02-08-2016</span>
</big>
</b>
</div>
MobApp iOS.A in C04
<br>
09:00 am-11:00 am
<br>
<b>
<big></big>
</b>
<br>
MobApp Andr .A in C12
<br>
01:30 pm-03:30 pm
<br>
<b>
<big></big>
</b>
<br>
<div id="box" style="background-color:#000000; margin:0px;">
<b>
<big>
<span style="color:#00BB77;">Wed, 03-08-2016</span>
</big>
</b>
</div>
Adv. Studio 1.A in C11
<br>
01:30 pm-03:30 pm
<br>
<b>
<big></big>
</b>
<br>
<div id="box" style="background-color:#000000; margin:0px;">
.....etc....
I already wrote a sample of a code to get the value inside the span (the date) with:
$.ajax({
url: 'http://www.thewebsite.com/index.html',
type: 'GET',
success: function(res) {
var data = $.parseHTML(res);
$(data).find('#box').each(function() {
alert($(this).find('span').html());
});
}
});
And it works I get :
Tue, 02-08-2016
Wed, 03-08-2016 etc...
I would like now to get what's after the </div> and the <br> (The subject) and the (time)
As you can see sometimes it can be only one subject per day or more.
I know it would have been much easier if everything would have been inside proper div element but they coded their website long time ago and they won't change that.. 😞
I tried to get some of the value with next() or nextSibling.nodeValue() but without success.
So thanks in advance for a tip or a solution.
Cheers

You can do with javascript child node with below way:
var children= (document.getElementById("box")).childNodes;
var i=-1,length=children.length;
while(++i < length){
//chidrent text node will also come
console.log(children[i]);
}

$(data).find('#box') will return only first element with ID box because ID selectors are unique. So if you want to access all the elements with ID box use a class selector instead.
For eg: Use class="box"
<div class="box" style="background-color:#000000; margin:0px;">
Then
$.ajax({
url: 'http://www.thewebsite.com/index.html',
type: 'GET',
success: function(res) {
var data = $.parseHTML(res);
$(data).find('.box').each(function() {
var children = this.childNodes,
i = -1,
length = children.length;
while (++i < length) {
console.log(children[i]); // This will give you each child nodes of div with class box. You can extract the HTML contents of these child nodes here.
}
});

How can I change table navbar with CSS in an extension?

I am currently developing a Chrome extension for my university and I have done most of the things I want to do but I am having difficulty with one thing is that whenever I try to select the first <table> tag which is the navbar in this link I can't seem to hide it and then add my custom navbar using CSS.
Here is my code (I have included random createtextnode that I want to add to give a sense for what I want do or I am trying to do):
CSS
table:nth-child(1)
{
display:none;
}
JavaScript
var note = document.getElementsByName('stud_login')[0];
var par = document.createElement("div");
var tag = document.createElement("a");
var t1 = document.createTextNode(" Hello! Please try to refresh page again if the verification is not filled properly.");
var t2 = document.createTextNode("Click here");
var t3 = document.createTextNode(" Any suggestions? ");
var br = document.createElement("br");
par.setAttribute("class", "info-msg");
par.appendChild(t1);
tag.setAttribute("href", "http://goo.gl/forms/QI8gPMfKML");
tag.setAttribute("target", "_blank");
tag.setAttribute("id", "rahultag");
par.appendChild(t3);
tag.appendChild(t2);
par.appendChild(tag);
note.parentElement.appendChild(par);
Here is the HTML code i want to target and is the first table that occurs:
<table width="100%" height="15%" border="0" align="center" cellpadding="0" cellspacing="0" background="images/banner_bg3.jpg">
<tr>
<td width="25%" align=left>
<img src="images/vit_logo6.jpg" height="76" width="297">
</td>
<td align=center>
<br>
<font size=5 color=#FFFFFF face="Comic Sans MS">
<b>V-TOP</b><br>Student Login
</font>
</td>
</tr>
</table>

To target the first table, then this would likely give you the desired result
var note = document.getElementsByTagName('table')[0];
If the table is not the first element in its parent, you need to use insertBefore instead of appendChild
note.parentElement.insertBefore(par, note);
Side note:
If the table:nth-child(1) { display: none; } won't work, you could use replaceChild to replace the table with your new element
note.parentElement.replaceChild(par, note);
or simply remove it
note.parentElement.removeChild(note);
Note though, that if you are to remove it, do that after you inserted the new, or else there will be no reference where to insert the new.
If you still need to remove before add, read more here how to get the element to be removed's next sibling: https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

Adding HTML slideshow to multiple pages (without using frames)

I am new to the site (and coding) so please bear with me!
I am trying to add the following clickable slideshow to my site in a way that means I can change the images in one file (HTML or JS) and this be reflected on every page on which the slideshow is called:
<table border="0" cellpadding="0">
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider"></td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center><p>
<script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var which=0
var what=0
photos[0]="image1.bmp"
photos[1]="image2.bmp"
photos[2]="image3.bmp"
text[0]="Image One"
text[1]="Image Two"
text[2]="Image Three"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
</script>
<p><input type="text" name="description" style="width:200px" size="50">
<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br />
</p>
</center>
</div>
</form>
</td>
</tr>
Currently I have used:
<script type="text/javascript" src="images.js"></script>
in the relevant html div. to call a simple .js file which displays the images in one long list, e.g.
document.write('<p>Image One</p>')
document.write('<img src="image1small.png" alt=Image One; style=border-radius:25px>')
document.write('<p>Image Two</p>')
document.write('<img src="image2small.png" alt=Image Two; style=border-radius:25px>')
I have tried every way I can think of, and searched many posts on here to try and get the slideshow to display within the same div. I have copied the html code into the .js file and appended it with document.write on every line, I have tried / on every line, I have tried 'gettingdocument.getElementById', but nothing works!
The slideshow code itself is fine; if I put this directly onto each page then it works correctly, I just can't seem to 'link' to this code and have it run so anything appears.
Please provide the simplest possible solution for this, without any need to install jquery plugins, or use anything other than basic HTML and JS.

There were alot of small bugs, i fixed them for you. you didn't put a semicolon after your javascript statements, tey aren't neccesary but it's cleaner code, you didn't exit alot of html tags
<table border="0" cellpadding="0">
<tr>
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider">
</td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center>
<p>
<p id="description" style="width:200px" size="50"></p>
<p><a onClick="backward()"><img src="imageback.png" alt="back" />Back Image</a>
<p><a onClick="forward()"><img src="forward.png" alt="forward" />Forward Image</a>
</p>
</center>
</div>
</form>
</td>
</tr>
Javascript:
(function() {
var photos=[];
var text= [];
var which=0;
var what=0;
photos[0]="image1.bmp";
photos[1]="image2.bmp";
photos[2]="image3.bmp";
text[0]="Image One";
text[1]="Image Two";
text[2]="Image Three";
document.getElementById('description').innerHTML = text[0]
backward = function(){
if (which>0){
which--;
window.status='';
what--;
console.log(which);
document.images.photoslider.src=photos[which];
document.getElementById('description').innerHTML = text[what];
}
}
forward = function(){
if (which < (photos.length-1)){
which++;
console.log(which);
document.images.photoslider.src=photos[which];
what++;
document.getElementById('description').innerHTML = text[what];
}
else {
document.getElementById('description').innerHTML = 'End of gallery';
}
}
function type()
{
alert("This textbox will only display default comments")
}
})();
And last but not least i've created the fiddle to show you it's working:
http://jsfiddle.net/45nobcmm/24/

You can create a javascript file that search for an element and change the innerHTML of the element to the slideshow you want to show.
For example this could be the script:
var slideshow = document.getElementById('slideshow');
slideshow.innerHTML = 'Your slideshow html';
and your main html page should have a slideshow div.
but you need to know that it's not the best solution, you should learn PHP or another back-end language and than you could use include('page.html'); for example