What is the best way to delete a container when its child element includes a specific string?

I run a website that compiles video clips from various sources, including YouTube. Occasionally, some clips appear as private videos. I am looking to use jQuery to apply the display:none; property to the entire div when the class a.colorbox.cboxElement contains the text "Private video". How can I achieve this?

In the past, I have managed to add an extra class to individual div elements in order to remove them, but I am uncertain about how to handle nested elements:

$( "#div:contains('text')" ).addClass( "newclass" );

The HTML structure is as follows:

<li class="feed-item">
    <div class="thumbnail-excerpt wprss-feed-thumbnail sgvtagged">
        <div class="SGVthumb SGVthumb-0" data-title="SKateFlix" data-desc="The Amazing SkateFlix" data-type="yt" style="width:280px;height:210px;float:left;padding-right:px" data-media="SGVvideo" data-thumb="http://www.youtube.com/embed/2A7vCq8BmQQ" data-yid="2A7vCq8BmQQ" data-image="0" data-video="http://www.youtube.com/embed/2A7vCq8BmQQ?wmode=opaque&amp;autoplay=1&amp;rel=0"><img height="210" width="280" src="http://skateflix.se/wp-content/uploads/cache/remote/www-gstatic-com/3140846889.png"><img class="mpover" src="http://skateflix.se/wp-content/plugins/sgvideo/img/ytp.png" style="left:40px;top:40px"></div>
    </div>
    <div class="source-date"><span class="feed-source">VANS </span></div>
    <a class="datum">onsdag, maj 6</a>
    <a class="colorbox cboxElement" href="http://www.youtube.com/embed/2A7vCq8BmQQ">Private video</a>
    <div class="colorboxexcerpt" href="http://www.youtube.com/embed/2A7vCq8BmQQ">...</div>
</li>
javascriptjqueryhtmlcss

Answer №1

If you want to hide certain elements based on their content, you can use a combination of the :has and :contains selectors:

$( ".feed-item:has(a.cboxElement:contains('Private video'))" ).hide();

In this example, there is one Private video and one Public video included:

Check out the JSFiddle for a live demonstration: http://jsfiddle.net/TrueBlueAussie/7vramkem/

Answer №2

It seems like deleting the parent li of the anchor tag could be a solution.

$( "a.cboxElement:contains('text')" ).closest('.feed-item').hide();

See it in action here: Fiddle

Answer №3

    $('section.item').each(function(){
        if($(this).find('.cboxElement').text() === "Restricted Access"){
            $(this).addClass( "customClass" );
        }
    });

Regardless of the timing or method for conducting the check, this conditional statement should effectively meet the requirements.

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

Serialization not being successful

Having an issue with my form that is being loaded and posted using ajax. When trying to send the data, nothing is added to the post. Here's a simplified version of the code: <form id="userForm"> <input type="text" name="username" /> ...

javascriptjqueryajax

What is the best way to generate multiple progress bars by leveraging a for loop?

Exploring the code snippet below, I've been creating a progress bar that reacts to specific data input in array form. However, the issue I've encountered is that the code only generates a single progress bar. How can I incorporate this into my f ...

javascripthtmlcssfor-loopprogress-bar

Leveraging ng-attr in dynamically added HTML elements through ng-bind-html

Have you ever wondered how ng-attr is evaluated for elements inserted using ng-bind-html? Check out this JS Fiddle demonstration. Here's the HTML: <body ng-app="TestApp" ng-controller="TestCtrl"> <div ng-bind-html='y | to_trusted&a ...

javascriptangularjssvgng-bind

A role requiring coordinates x, y, and z with significant values

http://jsfiddle.net/eho5g2go/ var offset=10000000; ... camera.position.set(offset,offset,400); mesh.position.set(offset-300,offset,0); camera.lookAt(mesh.position); ... animate(); The "offset" variable is crucial for determining the camera and mesh p ...

javascriptthree.js

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

Is it possible to retrieve the id of a dynamically generated div and show a unique message when each div is clicked in the code snippet found at this link? function get_random_color() { var letters = '0123456789ABCDEF'.split(''); ...

jqueryhtmlcss

Issue encountered while attempting to pass a function within the data in React

I've encountered an issue while trying to pass a function called sectionOne and then calling it from another component. The error message I received is quite confusing. Error: Warning: Functions are not valid as a React child. This may happen if you r ...

javascriptreactjsrxjsmaterial-ui

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left. I initially used jQuery in a separate file to resolve th ...

htmlcssheight

How to eliminate the gap below a CSS element by adjusting the top value

https://i.stack.imgur.com/Sn6Wx.png The three 'Replacement Options' sections are contained within a div with the class relative. The relevant CSS properties have been applied as shown below: .relative { top: -10rem; position: relative; ...

htmlcss

What is the process of connecting marionette rendered views to the DOM?

I am encountering a challenge with my simple setup using Marionette that I am trying to resolve. My issue lies within a view containing a collection: var MyItemsView = Marionette.View.extend({ template: "#some-template" }); var view = new MyItemsVie ...

javascriptjquerytemplatesbackbone.jsmarionette

Identify unique MongoDb instances within an array of data

My list contains various unique items - search = alluk.distinct('Object of search') I am interested in counting each item individually. Presently, I am counting them manually in the following way - alluk.find({'Object of search':&ap ...

javascriptmongodbmongodb-queryaggregation-frameworkpymongo

The delivery person is not receiving a reply after making the delivery

When using Express/Node and Postgres with the 'pg' package, the following code snippet is used: const createEvent = (request, response) => { console.log(request.body); const { type, location, current_attendees ...

javascriptnode.jspostgresqlexpress

Is a table cell's border considered as part of its content?

A discrepancy is observed in the rendering of a document on Firefox and Chrome browsers: <!DOCTYPE html> <html> <head> <title>Testing table rendering</title> <style> table { ...

htmlcssgoogle-chromefirefox

Managing various encoding methods when retrieving the XML data feed

I'm attempting to access the feed from the following URL: http://www.chinanews.com/rss/scroll-news.xml using the request module. However, the content I receive appears garbled with characters like ʷ)(й)޹. Upon inspecting the XML, I noticed that ...

javascriptnode.jsxmlencodinghttprequest

Scrolling horizontally to display dynamic columns based on a search query in AngularJS

I am facing a challenge with implementing search functionality in a table that has multiple dynamic columns with a horizontal scrollbar. The goal is for users to be able to search for a specific column name or data, and if a match is found, the scrollbar s ...

htmlcssangularjs

aligning a form vertically in a container

<div class="parent"> <div class="left-child"> <img src="logo.jpg" alt="logo"> </div> <div class="right-child"> <form action="#"> <input type="text" value="search"> &l ...

htmlcssforms

The callback function in JavaScript seems to be missing without ever being executed

I have a SendMail function using nodemailer that successfully sends emails, but the callback function logging "mail sent" is not getting executed. Any suggestions on what might be causing this? var email = '<a href="/cdn-cgi/l/email-protection" cla ...

javascriptnode.jsexpresscallback

Using Inline Styling to Showcase a Background Image in a REACTJS Component

import React from 'react'; import Slick from 'react-slick'; import style from './Slider.module.css'; import {Link} from 'react-router-dom'; const SliderTemplates = (props) => { let template = null; const ...

javascriptcssreactjs

CSS: choose all elements starting from the n-th element and apply styles to them

Is it possible to choose specific child elements beyond the first few in a parent element? To clarify, let's say there's a div containing 7 spans. How can I select only the spans starting from the 3rd element onwards - so specifically span 4, 5, ...

csscss-selectors

What's up with portable devices requiring two taps to hover over one DIV and affect another DIV?

Upon implementing "hover one DIV - affecting another inner DIV," a strange issue arose on iPad/iPhones where it now requires two taps to click on the link within the DIV with the hover effect: Below is the HTML code: <div class="portfblock"> &l ...

ioscsshovertouchscreen

Deciding Between Promises and Callbacks in Node.js

As I update my older Node.js code, I am also creating new modules to integrate with the existing code. One challenge I face is transitioning from using callbacks to utilizing ES6 promises more frequently. This has created a mixture of functions that return ...

javascriptnode.jspromisecallbackes6-promise