Extract the content from a widget on a different site

How can I eliminate the specified text shown in the image?

https://i.sstatic.net/174fD.png

This widget is sourced from an external website.

Is it possible to use javascript to wrap a around the text and then remove it using css? It's important to preserve the strong element within the span.

<p class="Firmafon-external-css-widget-call-status Firmafon-status-available">
<span class="Firmafon-call-status-4571995996">Last call was answered in <strong class="Firmafon-call-status-answer-time-4571995996">26 seconds</strong></span>

javascriptcsstext

Answer №1

It appears that your request involves removing only the specific text "Sidste opkald blev besvaret på", while preserving the content within the <strong>...</strong> tags inside the parent <span>. Here are two possible solutions:

Update: A CSS solution:

.Firmafon-external-css-widget-call-status.Firmafon-status-available span {
  font-size: 0;
}
.Firmafon-external-css-widget-call-status.Firmafon-status-available span strong {
  font-size: 14px;
}

A JavaScript solution:

  1. Save the content of the <strong> element;
  2. Clear the content of the <span> element;
  3. Insert the saved content of the <strong> element back into the emptied <span>.

Here is an example implementation:

window.addEventListener('load', removeText);

function removeText() {
  var p = document.querySelector(".Firmafon-external-css-widget-call-status.Firmafon-status-available");
  if (!p) return;
  var span = p.querySelector("span");
  var strong = span.querySelector("strong");
  span.innerHTML = '';
  span.appendChild(strong);
}

Answer №2

If you have the ability to modify/access the DOM elements, you can use the following code:

var selector = ".Firmafon-external-css-widget-call-status.Firmafon-status-available",
    content = document.querySelector(selector + " strong").innerHTML;
document.querySelector(selector).innerHTML = content;

This script will save the content of the strong element within the specified paragraph and delete the rest of the content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alter the design when hovering over a relevant element

How can I change hover styles for specific items in React? Currently, all item styles change at once when hovered. I want to only change the style of the selected div when hovering over the add to cart button. Visit this link import React, { useState } fr ...

javascriptreactjshoverdestructuringonmouseover

elevate and descend div

I am looking to create a div with interchangeable content items. After doing some research on Google, I came across this helpful link: http://jsfiddle.net/RrbzM/4/. In the fiddle, each number can be clicked to move the content up and down. However, I only ...

jqueryhtmlcss

Executing a JavaScript function using document.write()

When I try to click on the SWF part1 links within the document.write() function in order to call the openswf function, nothing happens. Here is my code: <html> <a href="#" onclick="Popup();">show popup</a> <script> functio ...

javascripthtml

Is there a way to create a footer similar to this one?

I need to create a footer, but I'm struggling with placing a circle at the top half of the footer like this. Even though I can create a footer, I still encounter some issues. This is the code I have right now: .Footer { position: fixed; left: ...

htmlcss

How to properly adjust image size in a flex-direction column layout - tips and solutions

My mission is to place an <img> with text blocks above and below it inside a container of specified height. The exact heights of the text blocks and image are unknown. After extensive searching, my colleague provided a useful solution by using the ...

cssflexbox

The importance of utilizing an object FormData in Node.js to ensure the proper functioning of multer for file uploads via ajax with jQuery

Currently, I am learning about Node.js and using Multer, AJAX, and jQuery for file uploads. However, I am feeling a bit confused. Let's say I have the following code in an HTML file: <form action="/" method='post' enctype=" ...

javascriptjquerynode.js

Errors have been observed when using JavaScript variables that begin with the symbol $

For the longest time, I've used JavaScript variable names that begin with $ to signify that they hold jQuery values. For example: $buttons = $( 'button' ); However, a couple of nights ago, I encountered an issue when loading the page in the ...

javascriptjqueryvariablesnaming-conventions

Unable to locate the Chart object within the chartjs-plugin-labels.js file

Hello there, I am currently working on an Angular project where I want to incorporate a chart plugin. To achieve this, I executed the following commands: npm install angular2-chartjs npm install chartjs-plugin-labels Following that, I imported it into my ...

javascriptangulartypescriptpluginschart.js

What is the best way to retrieve a particular element from a dictionary?

In my dictionary structure, I have a list containing 2 dictionaries. Here is an example: dict: { "weather":[ {"id": 701, "main": "Mist", "description": "mist"}, {"id": 300, "main": "Drizzle", "description": "light intensity drizzle"} ] } If I wan ...

javascriptpythonarraysjsonobject

Join the nested object using the delimiter ';'

My objective is to concatenate all values from an object using a semi-colon as separator. This process works perfectly when the object consists of just one level: obj = { name: "one" additionalInfo: "hello" ... }; Object.values(obj).join(&ap ...

javascriptobjectecmascript-6

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

htmlcss

What are the steps to create parallel curves in three.js for road markings?

My goal is to create parallel curved lines that run alongside each other. However, when I try to adjust their positions in one axis, the outcome is not what I expected. The code I am using is fairly simple - it involves a bezier curve as the central path ...

javascriptthree.jsbeziercurve

Efficient Techniques to Eliminate Unwanted Jumping in CSS Transitions

I am currently working on a unique "stack" component that is inspired by the amazing ElastiStack. You can check out a cool demo of my work here. The demo works flawlessly on desktop Chrome, but unfortunately, I have encountered some issues with the transit ...

jqueryioscsscss-transitions

Converting dates to time in amCharts v3: A step-by-step guide

I am looking to exclusively show "6 AM" on my X AXIS, rather than displaying 2019-09-05 06:00:00 Please refer to my code sample at https://jsfiddle.net/uwtz3p4h/ Is it feasible to only display the time? I have searched through their documentation but co ...

javascriptjqueryamcharts

What is the best way to make the background repeat seamlessly all the way across the screen horizontally?

Currently, I have set up an image as a background on my website. It's just a few pixels wide so I made it repeat across the screen width using CSS. However, I noticed that it stops slightly before reaching the right side of the browser window (around ...

cssbackgroundbackground-image

Error message: The variable datepicker_instActive is not defined within Jquery-ui Datepicker

Having trouble with a Rails + Angular app where I've implemented the jquery-ui datepicker. The console is showing an error that says: TypeError: datepicker_instActive is undefined if(!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? ...

javascriptjqueryangularjsjquery-uidatepicker

Discovering the process of retrieving information from Firebase using getServerSideProps in NextJs

I've been exploring ways to retrieve data from Firebase within GetServerSideProps in NextJs Below is my db file setup: import admin from "firebase-admin"; import serviceAccount from "./serviceAccountKey.json"; if (!admin.apps.len ...

javascriptfirebasenext.jsfirebase-admin

What steps do I need to follow to create a controller component for a Form Element

I am trying to create a dynamic controller component in React Native, but I am facing issues with accessing errors. I am using "react-hook-form" for form elements. Here is my component: const { control, handleSubmit, formState: {errors}, ...

javascriptandroidreactjsreact-native

Is there a way to display customized values on a particular column in a Vuetify table?

In the column named conditions, I am looking to display the count of rules > details. Please Note: The array rules has a property details.length = 2 This is what I have attempted https://i.stack.imgur.com/2LoFb.png Here is the code snippet: header ...

javascriptvue.jsvuejs2vue-componentvuetify.js

No visible changes resulting from the CSS file

My project includes a CSS file named default.css, but it doesn't seem to be working or making any changes to my page This is the content of default.css: .feedbackText{ display: none; text-align: center; margin-left: 50px; color: blue; } In the HTML ...

csshtmlbootstrap-4