I am experiencing an issue with the Search Filter where it is not successfully removing

My goal is to filter colors when a user searches for a color code. Currently, the search function displays the correct number of filtered items, but the color bubbles are not being removed as intended.

I am working on removing the bubbles when a search is performed.

$(document).ready(function() {

  var jobCount = $('#list2 .in2').length - 1;
  $('.list-count2').text(jobCount + ' items');


  $("#search-text").keyup(function() {
    //$(this).addClass('hidden');

    var searchTerm = $("#search-text").val();
...

@media (max-width: 428px) {
  svg.bi.bi-search {
    display: none;
  }
}



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec2dec3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

...
                      </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

<div class="colPadding"></div>

javascripthtmljquerycss

Answer №1

The main issue stems from the absence of the hidden class in your CSS. Consider adding something similar to 

.hidden { display: none !important; }

It's important to note that $("#list2 li") will target and hide the enclosing li.in2 element. To avoid this, try using 

$("#list2 .color-list li")
instead;

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

Struggling to pass along the URL value from a promise to various modules within Express is proving to be quite a challenge for me

I've been working on an app using ngrok, following a guide from Phil on setting up ngrok with nodemon. You can find the link to the post here. I need to have access to the URL received from the promise in the bin folder throughout the app server so t ...

javascriptnode.jsexpressnode-modules

Image broken despite accurate file path in next.js and tailwind

https://i.stack.imgur.com/2ZqPa.png In my components folder, specifically in navbar.js, I have a path to the image folder <img className="block lg:hidden h-8 w-auto" src='../images/logo_injoy.png' alt="Logo" /> U ...

htmlnext.js

Issue: In an Angular electron app, a ReferenceError is thrown indicating that 'cv' is

I have been working on a face detection app using OpenCv.js within an Angular electron application. To implement this, I decided to utilize the ng-open-cv module from npm modules. However, when attempting to inject the NgOpenCVService into the constructor ...

javascriptangularopencvelectron

How can the WordPress Gutenberg Popover be positioned to follow the cursor?

I have a component called Popover that I want to position at the cursor's location. For instance, in a component called RichText, if the user's cursor is at the beginning, middle, or end of a sentence, the Popover should appear depending on the c ...

javascriptreactjswordpresswordpress-gutenberggutenberg-blocks

Is it feasible to activate the calendar widget by simply clicking anywhere within the input field?

I've been working on a custom React component for a date picker, and I'm facing an issue. I want the calendar widget to open whenever a user clicks anywhere inside the input field, not just on the arrow icon. However, no matter what I try, the ca ...

htmlreactjsinputdatepicker

Handling undefined properties by defaulting to an empty array in ES6

In the code snippet below, I am attempting to extract barNames from an object named bar: const {[id]: {'name': fooName} = []} = foo || {}; const {'keywords': {[fooName]: barNames}} = bar || []; Please note that although fooName exi ...

javascriptecmascript-6

Preventing Adjacent Text from Moving Due to a Floated i Element

I have a div with a bootstrap icon positioned at the top right corner. However, I want to center the text horizontally without shifting the position of the icon. Is there a way to achieve this? See my sample code here: https://jsfiddle.net/x1Lvyu6t/3/ ...

htmlcss

Ways to retrieve base64 encoded information from an image within an HTML document

On my registration form, users have the option to select an avatar from 2 choices: Select a default avatar Upload their own custom avatar This is how I have implemented it in my HTML page. <img id="preview" src="img/default_1.png"> The chosen av ...

javascripthtmlimagebase64

Instructions on making one script activate another [jQuery] for resizing and enlarging a search box

Hi there, I'm facing a small dilemma and would appreciate some guidance. I've been working on creating a menu bar that mimics the functionality of apple.com (where the search bar expands when clicked to show options). Currently, I have a script ...

jqueryhtmlmenubar

Customizing the appearance of selection dropdown options in React

Is it possible to customize the styling of the choices in a React input dropdown? For instance, I am interested in creating an autocomplete dropdown that presents the options neatly arranged in columns. Essentially, I want to design a dropdown data grid t ...

javascripthtmlreactjsreact-select

Runs tasks asynchronously in a sequential manner

I am attempting to run two functions asynchronously in series using node.JS, but I am struggling with the implementation. Currently, my code looks like this: Function 1: function search(client_id, callback) { clientRedis.keys('director:*', ...

javascriptnode.jsseries

Is it possible to retrieve and display an object from an API using its unique ID?

I created a straightforward application. The main page displays a list of movies fetched using an API, and upon clicking on a particular movie, it leads to a new page with detailed information about that movie. On the details page, another API call is ma ...

javascriptfunctionapivue.jsurl

Having trouble sending data from a page to a child component using getStaticProps

I'm currently working on a project using next.js and I'm facing an issue with passing data from the "gymlist" page to the "table" component. Here is the code snippet from the "gymlist" page where I have defined the getStaticProps function: expor ...

javascriptreactjsnext.js

How to turn off the default print media query in Zurb Foundation 5 without relying on SASS

I've been having trouble with printing website pages that are built using Zurb Foundation 5. Whenever I try to print or preview the page, it defaults to the `medium` grid size and looks different from how it appears on the desktop version. I've ...

htmlcsszurb-foundation

Can information be saved to a JSON file without using a server-side language?

Previously, I've come across questions where the recommended solution involves using a server-side language. However, since I don't have knowledge of a server-side language yet, I was curious to know if it's possible to achieve this with my ...

javascriptjqueryjsonajax

Transferring data from one of the three submitted forms by utilizing jQuery's AJAX function

Currently, I am facing a challenge with three forms on a website, where two of them are located in modal windows. My goal is to use ajax to send input values such as name, phone, email, and radio button selections (which vary in each form). However, I have ...

javascriptjqueryajax

The process of retrieving information from a Bootstrap modal using Laravel and MySQL

In our Laravel application, we have a datatable to display data. However, when updating data using a Bootstrap modal box with a foreach loop, only the last data is fetched in the table. Here is the button where we link: @foreach($patients as $patient)< ...

phphtmlmysqllaravel

Preventing event propagation in Angular when clicking

What is the best way to call an Angular function within my jQuery code? I attempted to do so with the following: $(document).on('click', '.myBtn', function(e) { angular.element($(".someClass")).scope().clearBtnItems(); e.stop ...

javascriptjqueryangularjsstoppropagation

Is it possible to attach the entered URL to an image following the text that has been inputted?

I've coded everything but the jquery part isn't working. Enter URL :<input type="text"> <button id="btn"> continue </button> <div contenteditable="true" id="bod"> Click here to start typing</div> $(document).ready( ...

javascriptjqueryhtmlcssangularjs

What is the best way to find a specific element value and gather all following elements in a

What is the best way to retrieve elements following -p or --name within this array? ['-p', 'player', '1', '--name', 'player1', 'name'] ...

javascriptarrays