Tips for choosing the injected HTML's List Element (li) while ensuring it remains concealed

How do I hide the list item with 

iconsrc="/_layouts/15/images/delitem.gif"
image when this div is injected by a first party and I am a third party trying to conceal it?

$("<style> what should be inserted here ???? { display: none; } </style>").appendTo(document.documentElement);

What is the best way to target the list item with 

iconsrc="/_layouts/15/images/delitem.gif"
in the document?

<div class="ms-core-menu-box ms-core-menu-hasIcons ms-core-defaultFont ms-shadow" title="" dir="ltr" contenteditable="false" style="top: 0px; position: absolute; visibility: visible; left: -129px; width: 127px;" flipped="false">
    <ul class="ms-core-menu-list">
        <li type="option" text="Delete" onmenuclick="spgridcontainer_WPQ2_rowcontextmenu_onclick(0);" iconsrc="/_layouts/15/images/delitem.gif" iconalttext="Delete" enabled="true" checked="undefined" id="mp43_0_0" class="ms-core-menu-item">
            <a class="ms-core-menu-link" id="mp43_0_0_Anchor" href="javascript:;" onclick="return false;" title="Delete">
                <div class="ms-core-menu-icon">
                    <img src="/_layouts/15/images/delitem.gif" alt="Delete" title="Delete" id="mp43_0_0_ICON">
                </div>
                <div class="ms-core-menu-label" id="">
                    <span class="ms-core-menu-title">Delete</span>
                    <span></span>
                </div>
                <span class="ms-accessible"></span>
                <div></div>
            </a>
        </li>
    </ul>
</div>

The objective is to ensure the delete button remains hidden whenever this list is injected into the page.

javascriptjqueryhtmlcss

Answer №1

Keeping things simple using css attribute selectors:

li[iconsrc="/_layouts/15/images/delitem.gif"] {
    display:none;
}
<ul>
    <li iconsrc="/_layouts/15/images/delitem.gif">
        <img src="/_layouts/15/images/delitem.gif" alt="Delete" title="Delete" id="mp43_0_0_ICON" />
    </li>
    <li>
        <img src="/_layouts/15/images/adasdasfafsdfs.gif" alt="sdfsdfsdf" title="Blablalbavbaab" id="fsdfsdfsdf"/>
    </li>
</ul>

Answer №2

To hide a list, simply utilize the id attribute in the style section:

<style>
  li#list123 {
      visibility: hidden;
  }
</style>

Answer №3

Perhaps you can attempt it in this manner:

$(document).ready(function(){
$('ul li').each(function(index, element) {
 if($(element).attr('iconsrc') =='/_layouts/15/images/delitem.gif'){
   $(element).hide();
 }
});
});

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

What steps can be taken to resolve the issue of the Cannot POST /index.html error?

Here is an example of a calculator app created using HTML and Javascript. Upon running the program with nodemon and accessing localhost:3000, pressing the submit button triggers an error on Google Chrome. [nodemon] starting `node calculator.js` Server sta ...

javascripthtmlnode.js

The page background appears to be incomplete in its coloring

As I work on creating a web application for personal use, my goal is to ensure it is mobile-friendly. However, I've encountered an issue where the background of my language page isn't displaying in full blue color as intended. Despite trying diff ...

htmlcssreactjs

Module 'prompt-sync' not found

When attempting to take user input in Node.js using the prompt module, I encountered the following error message: node:internal/modules/cjs/loader:998 throw err; ^ Error: Cannot find module 'prompt-sync' Require stack: - D:\Code\C+ ...

javascriptnode.jsnpmuser-inputnpm-install

when passing a JavaScript symbol in Django's JSON objects, it does not display properly

When working with Django (2.2), my goal is to send a JSON response in this format: return JsonResponse(data, safe=False) Within the data object, there is a value that looks like this: "unit": "\u33A5" (cubic meters). However, ...

javascriptdjango

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Issue encountered while using AJAX to load images

Currently, I am utilizing a jQuery plugin to fetch images from Flickr. My aim is to organize these images into 3 columns dynamically as they are loaded, ensuring that each image is placed in the shortest column to achieve close to equal lengths for all col ...

javascriptimagejquery

Insert the video link and preview it with live option

Currently working on a form that allows users to input a video URL. The form will be a standard input field where they can enter a URL such as: http://video.google.com/videoplay?docid=1299927595688205543 I want to include a button within the form labeled ...

javascriptjqueryforms

Double-click required to toggle button

Here is the code snippet for controlling an LED using a web page. The script, linked to Python, effectively controls the LED. However, there is an issue where the button toggles to the right side (ON position) only after a double click. Upon first click ...

javascriptjquerypythonhtml

How can I automatically copy a highlighted link in HTML?

I am attempting to implement a feature where users can click on a link and have it automatically copied. For example, I want it to appear like this: "UPI ID: david@okidfcbank". In this case, the link should be highlighted in blue. This is the code I have ...

javascripthtmlcssformshighlight

What is the reason for XMLHttpRequest overwriting preexisting events?

After clicking a button, I trigger an XMLHttpRequest event. However, I noticed that the original event becomes null once the request is sent. Why does this occur? Is there a way to maintain the original event? document.getElementById('start') ...

javascriptajaxxmlhttprequest

What's the best way to prevent extra spacing when typing in a materialUI TextField?

Instructions for the user: Please input your first name without any spaces between characters. I attempted to implement the following code, however, it did not achieve the desired outcome. <TextField required id="name" label="First Name" ...

javascripthtmlreactjsmaterial-ui

Tips for Waiting for Binding in an Angular 1.5 Component (No Need for $scope.$watch)

Currently, I am in the process of developing an Angular 1.5 directive and have encountered a frustrating issue related to manipulating data that is not yet available. Below is a snippet of my code: app.component('formSelector', { bindings: { ...

javascriptangularjscomponents

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

javascriptjqueryhtmlcss

Issue: Unable to reach essential Node.js modules

After attempting to deploy Next.js on Cloudflare Pages, I encountered the following error: Error: Could not access built-in Node.js modules. It is recommended to ensure that your Cloudflare Pages project has the 'nodejs_compat' compatibility flag ...

javascriptnext.jscloudflare-pages

Utilizing a Dependency Injection container effectively

I am venturing into the world of creating a Node.js backend for the first time after previously working with ASP.NET Core. I am interested in utilizing a DI Container and incorporating controllers into my project. In ASP.NET Core, a new instance of the c ...

javascriptnode.jstypescriptexpress

A "Uncaught TypeError" error occurs when trying to execute a function using the dollar sign

After successfully recognizing the hover function, the console displays an error message: Uncaught TypeError: $ is not a function <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(docume ...

javascriptjquery

The site is visually appealing in Firefox, but has a few issues on Chrome

I've encountered a common issue where my website displays perfectly in Firefox but looks terrible in Dreamweaver and Chrome. To fix it, I made live CSS edits in Firefox then copied them to Dreamweaver resulting in a mess. Here's how it should lo ...

htmlcssgoogle-chromefirefoxnavigation

Verify if a set of Radio buttons contains at least one option selected

Need help with validating a Feedback Form using either JQuery or Javascript. The requirement is to ensure that every group of radio-buttons has one option selected before the form can be submitted. Below is the code snippet from form.html: <form id=&ap ...

javascriptjqueryhtml

What is the best way to implement a Navbar link in React.js?

I am currently working on developing a website using Reactjs. I have successfully created a Navbar with two links - Home and Contact. However, when I click on the Contact link, although the URL changes accordingly, the page itself does not update. I have s ...

javascriptreactjsreact-routernavbar

What is the conventional method for sending data by utilizing the output of a previous data submission in Node.js with Express and FaunaDB?

I am in the process of revising a project and have a question about how to post an array of data using the return value of a previous post request as the ID. Here is an overview of the data structure: Checklist A [ChecklistItem 1, ChecklistItem 2, Checkli ...

javascriptnode.jsexpressfaunadb