I would like to conceal any div elements with an href attribute and a certain unique structure, but not every single div on

I am seeking to conceal all div elements that contain the href attribute as shown below:

<div style="margin-left:36.847599164927%;margin-top:-30.27139874739%;width:19.72860125261%"><a href="//www.exemple.com/item/detail/4000105891117.html" target="_blank" rel="noopener"><img src="//ae01.alicdn.com/kf/He3f2750635b24a4d9e30666180dfacc89.png"></a></div>

I also want to hide the div with an image that has the structure below:

<div><img src="//ae01.alicdn.com/kf/Haabbc1065ea449668ced4bf88021f4aea.png"><p></p>

Here is the large text containing the divs that I want to hide, leaving the rest of the divs visible:

<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab" id="tab-description" role="tabpanel" aria-labelledby="tab-title-description" style="">
                
    <h2>Description</h2>

<div>
<div>
[...]
<strong style="font-family: times new roman , times , serif;color: #ff0000;font-size: 18.0px"><span style="color: #000000"><span style="font-family: times new roman , times , serif"><span style="font-size: 36.0px">Satisfaction —— Give us 5 stars .</span></span></span></strong>
[...]

I attempted the following JavaScript code, but it hides all div elements:

window.addEventListener=()=>{
var elem=document.querySelectorAll("div");
var i;
for(i=0;i<elem.length;i++){
  var obj=elem[i];
  if(obj.innerHTML.toString().includes('href')){
      obj.style.display="none";
    }
}
}
javascripthtmljquerycss

Answer №1

To effectively eliminate <div> elements that contain child elements with an existing href attribute, the following JavaScript code can be utilized:

    const divsToRemove = document.querySelectorAll("div");
    divsToRemove.forEach(divElement => {
        Array.from(divElement.children).forEach(childElement => {
            if (childElement.matches("a[href]")) {
                divElement.style.display = "none";
            }
        })
    })

Answer №2

It seems that using the :has query could be a suitable option for your scenario. Here is the documentation link for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:has#Examples

div:has(a[href]) {
    display: none;
}

Edit

It is worth noting that CSS does not natively support the :has query. You could manually add a CSS class like .has-a-href to the divs, or utilize Javascript/JQuery. If you opt for JQuery:

$("div:has(a[href])").css("display", "none")

Edit 2:

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

Navigating redirects in Node.JS using HorsemanJs and PhantomJS

I've recently delved into using horseman.js for web scraping in node.js. However, I'm facing difficulty understanding its working mechanism and finding useful examples online. My primary objective is to log in to a platform and extract specific ...

javascriptnode.jsphantomjs

Having trouble with the @keyup event not functioning properly in Vue?

I'm attempting to trigger a method when the enter key is pressed, but for some reason it's not working. Here's the code snippet: <template> <div> <button @click="callEvent" @keyup.enter="callEvent"> Click </button ...

javascriptvue.js

Troubleshooting z-index problem with background image and parent tag of image

I seem to be facing an issue with the z-index property. Here is the code snippet in question: <div id="sidebarCont"> <div id="avatarCont" class="mask"> <img id="" class="" src="img.jpg" alt=""/> </div> And here is the correspo ...

css

What is the best way to transform a JSON object with various key-value pairs into a list using JavaScript?

There's a JSON string that I need to convert into a different format, here is the original: var jsonData = [{"label":"Hass1(<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="354d4d4d6a465058755d5a4158545c591b565a58">[emai ...

javascriptjqueryjson

What is the method to create all possible combinations from the keys of a JSON object?

How can I generate object B that includes all combinations of object A using a key-value pair? { "x": "data-x", "y": "data-y", "z": "data-z" } The desired output should look like this: { ...

javascriptjson

How to create a calendar selection input using PHP?

Before I start writing the code myself, I am searching to see if there is already a solution available or if someone has previously outsourced the code. Below is an example of my date selection: https://i.sstatic.net/KqIDH.png I want to create a feature ...

javascriptphpjqueryhtmldate

Complete a bootstrap row and begin a new row after every nth div element

I have a grid layout in Bootstrap that I will be filling with blog post thumbnails. <section class="container"> <div class="row thumbs"> <div class="col-sm-3">content</div> <div class="col-sm-3">content</div> ...

javascriptjquerytwitter-bootstrap

Incorporating a self-invoking anonymous function to enhance Sir Trevor within an AngularJS framework while also making use of

I recently started working with AngularJS and I have an App where I am using the Sir Trevor content editor. I want to add some custom blocks to the editor by extending it, but I am having trouble accessing angular services within my extension code. The ext ...

javascriptangularjs

Ensure there is a sufficient gap between the top and bottom icons within the Material-UI Drawer

I'm having difficulty articulating this, but I'd like to add two different sets of icons to the Drawer component. Set 1 should be displayed at the top in a standard column format, similar to the examples provided by them. Set 2 should go at the b ...

javascriptreactjsmaterial-ui

Dynamically manipulate the perspective camera by moving and rotating it using a 4x4 matrix

Greetings, esteemed community members, For the past few days, I have been struggling with an issue related to updating the View Matrix (4x4) of my camera. This update is crucial for positioning objects within an AR-Scene created using three.js. The custo ...

javascriptmatrixthree.jsaugmented-realitymove

Menu with dropdown navigation

Looking to create a dynamic and responsive navbar menu with items and subitems on my website. Bootstrap has proven to be challenging when adding submenus. Are there any tools, frameworks, codes or plugins that could assist me in achieving this? It's ...

angularjshtmltwitter-bootstrap

Can you guide me on setting up a multi-selection option for a field in my Wordpress Theme by Templatic?

My website is http://aisiel.ro, a real estate agency website. Under the slider, there is a search field where we have the option to select an area called "Zona" - Area in English. Currently, users can only choose one area for their search, but I want to ...

phpjqueryhtmlwordpress

What causes the indexOf method to return -1 even when the values are present in the array?

Could someone explain why the indexOf() method returns -1 even though the values are present in the array? The includes() function also returns false for me. I feel like I must be missing something or forgetting a crucial detail. Any insights on why the ...

javascriptarraysreactjs

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

I've always wondered why setting a certain object's key as its own value in a loop results in undefined. Take this code block, for example: var text = 'this is my example text', obj = {}, words = text.split(' '); for (i = ...

javascript

Is jQuery's $.trim() function reliable or poorly implemented?

$.trim() utilizes a specific RegExp pattern to trim a string: /^(\s|\u00A0)+|(\s|\u00A0)+$/g However, this can lead to some issues, as demonstrated in the following example: var mystr = ' some test -- more text ...

javascriptjqueryregex

Utilize the v-if directive within a v-for loop

I am currently iterating over an array named cars using the v-for directive. I would like to implement a condition within this loop so that if the color property matches a certain value, a specific CSS style is applied. <p v-for="car in cars" ...

javascriptvue.js

overlaying an image with a CSS box and then dynamically removing it using JavaScript

I am new to JavaScript, so please bear with me if this question seems quite simple. I am facing an issue with my current task. There is an image on a web page. My goal is to place a black box on top of the image (using CSS) to cover it up. Then, with th ...

javascriptjqueryhtmlcss

Capturing error responses in a successful Javascript HTTP GET request

When I make an http request to a url, it returns a 500 error response as expected. However, the error is being captured in the success function instead of the error function. $http.get("myUrl") .then(function (response) { console.log(response) ...

javascriptangularjshttp

Bringing in a Native JavaScript File to Your Vue Component in Vue Js

After developing a frontend application using Vue Js, I encountered the need to integrate a native JavaScript file into one of my Vue components. This native js file contains various utility functions that I would like to access and use within my Vue comp ...

javascriptvue.js

How can I prevent the interpolation of "${variable}" in HTML when using AngularJS?

I need to display the string ${date} in a div element: <div>please substitute the ${date} as the tag for the name</div> The displayed content should be: please use the ${date} as the substitute tag to the name. However, the browser interpre ...

javascripthtmlangularjshtml-escape-characters