Category: javascript

I am creating a admin application where i want to display uploaded images of product stored in database. I have uploaded images as an object id in MongoDB. But the image container in admin app displays the number of images stored in database. But the images are not displayed. I tried using absolute URL too but that doesnot work either.

Here is my code to upload images:

{productPictures.length > 0
          ? productPictures.map((pic, index) => (
              <div key={index}>{pic.name}</div>
            ))
          : null}
        <input
          type="file"
          name="productPictures"
          onChange={handleProductPictures}
        />

Here is the code to display images:

<label className="key">Product Pictures</label>
            <div style={{ display: "flex" }}>
              {productDetails.productPictures.map((picture) => (
                <div className="productImgContainer">
                  <img src={generatePublicUrl(picture.img)} alt="" />
                </div>
              ))}
            </div>

Generate URL function looks like this:

const api ='http://localhost:2000/'
// const api = 'http://192.168.0.104:2000/'
const generatePublicUrl = (fileName) => {
    return `http://localhost:2000/src/uploads/products/${fileName}`;
}
export {
    api,
    generatePublicUrl
};

Function to save product in database:

const createProduct= (req, res) => {
  const { name, price, description, category, quantity, createdBy } = req.body;
  let productPictures = [];

  if (req.files.length > 0) {
    productPictures = req.files.map((file) => {
      return { img: file.location };
    });
  }

  const product = new Product({
    name: name,
    slug: slugify(name),
    price,
    quantity,
    description,
    productPictures,
    category,
    createdBy: req.user._id,
  });

  product.save((error, product) => {
    if (error) return res.status(400).json({ error });
    if (product) {
      res.status(201).json({ product, files: req.files });
    }
  });
        
}

The uploaded images in program looks like this:
Open image here

But the page displays blank area and filename shows undefined when inspected.
Open image here

Before the next build, I want to remove the previous build because if we do not remove the old build, some change that did not generate the output file may not be found as soon as possible. I am tried to do this work using this command in the package.json right now:

"dev": "rm -rf src/bundle && webpack --mode development --config build/webpack.dev.config.js",

but I feel this way may be a little dangerous with the rm -rf command, any better suggetion?

I wrote a website last year using raw html, css, and js, but I’ve been attempting to rebuild my code with react as a good exercise to learn the tool. I’ve noticed that my old code to reset my backgroundImage no longer works if I use a local image directory within the url(...) pointer, and only works with actual http:// urls. When the new code runs, the backgroundImage goes white if a local png is being used. I’ve been scratching my head for some time so I’d appreciate any help.

Old code:

function randombg(){
    var random= Math.floor(Math.random() * 2) + 1;
    var bigSize = ["url('background-images/1.png')",
                   "url('background-images/2.png')",
                   ...
    document.getElementById("random").style.backgroundImage=bigSize[random];
}

CSS:

#random {
    width: 100%;
    height: 100vh;
    background-image: url('assets/background-images/1.png');
    background-repeat: repeat; 
    position: absolute;
    z-index: -1;
}

New code is the same but uses a react function to run the js (handleClick(e) {…}).

I am trying to play video in html page.
But video always play from beginning. I save time in cookies ans try to seek video to that time .

How to seek video using dash js?

How are you, I’ve been trying to find an answer for a while and without success.
I am trying to get the array of a series of objects and from here create a single list.
I think it’s easier to show it.
This is the json file to read:

  {
  "Mnix_Active": [
      {
      "area": "Citytes",
      "name": "Ridemk"
      },
      {
      "area": "City77",
      "name": "Delivery"
      }
  ],
  "Storm": [
      {
      "area": "City152",
      "name": "Rescue"
      },
      {
      "area": "City22",
      "name": "Resupply"
      }
  ],
  "Meganix": [
      {
      "area": "Park22",
      "name": "Ride"
      },
      {
      "area": "City25",
      "name": "Ride"
      }
  ]     
  
}

and get it like this::

    [
        {
        "area": "Citytes",
        "name": "Ridemk"
        },
        {
        "area": "City77",
        "name": "Delivery"
        },
        {
        "area": "City152",
        "name": "Rescue"
        },
        {
        "area": "City22",
        "name": "Resupply"
        },
        {
        "area": "Park22",
        "name": "Ride"
        },
        {
        "area": "City25",
        "name": "Ride"
        }     
    
    ]

I am trying to upgrade my pagination to use Prisma and SWR. I am currrently storing all posts from an api call in an array and using this to paginate. What I would like to do is use SWR and Prisma to pass take and skip dynamically.

Currently I have the following:

//index.js
import React, { useState, useEffect } from 'react';
import Posts from './components/Posts';
import Pagination from './components/Pagination';

const App = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(10);

  useEffect(() => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await fetch`${process.env.NEXT_PUBLIC_SERVER_API}/posts/get take=15&skip=15`,
      setPosts(res.data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  // Change page
  const paginate = pageNumber => setCurrentPage(pageNumber);

  return (
    <div className='container mt-5'>
      <h1 className='text-primary mb-3'>My Blog</h1>
      <Posts posts={currentPosts} loading={loading} />
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
      />
    </div>
  );
};

export default App;

//Pagination Component
import React from 'react';

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className='pagination'>
        {pageNumbers.map(number => (
          <li key={number} className='page-item'>
            <a onClick={() => paginate(number)} href='!#' className='page-link'>
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

What I would like to do is use Prisma’s offset pagination, dynamically passing take and skip.

So using SWR like this:

  const { data: posts, error } = useSWR(
    `${process.env.NEXT_PUBLIC_SERVER_API}/posts/get?take=10&skip=10`,
    fetcher
  );

Here is my Prisma query:

const posts = await prisma.post.findMany({
      take: parseInt(take),
      skip: parseInt(skip),
      select: {
        id: true,
        title: true,
      },
      orderBy: {
        title: "asc",
      },
    });
res.json(posts)

How can I dynamically pass and track pagination using take and skip on the frontend?

I am developing a google chrome plugin, when I open the plugin popup UI, shows an error like this in the devtool console:

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

I just wonder what should I do to avoid this problem? someone said that the background.js send message to script.js, when the script.js is not ready will face this error, I checked my code and did not send any message in the background.js. this is what the error looks like in the devtool console.

why the google chrome show that the error came from HTML? is it possible to let the chrome tracing into which js file throw this error? from the error and tracing information, I have no idea where is going wrong and what should I do to fix it or avoid it.

I would appreciate if someone can help me out,

here’s my code :

`https://jsfiddle.net/m796a3ud/`

What I want to do is drag an image from these list of Images and be able to get a clone that’s draggable, and when I put it inside the box it counts how many images are inside, it works good for the most part but when I try to drag the cloned image in and out of the box a couple of times the clone gets cloned it self which is not what I want, I would really appreciate the help!

thanks.

Is there a way to set/change the preload option in webPreferences after BrowserWindow has been created?

What I would like to do is make a webcrawler that changes its preload script whenever the BrowserWindow redirects to a new URL.

The issue that I am trying to solve is that the webcrawler needs to collect different information on different sites.

The only 2 solutions I can think of are:

1. make 1 massive preload script that covers every website or
2. create a new BrowserWindow with a different preload script each time it redirects,

but neither seems resource efficient.

Is it possible to change or use different preload scripts without using multiple instances of the BrowserWindow?

1. Summarize the problem

I am unable to attach a PDF file to an email to be sent to an email address. The PDF file is in the same folder as the HTML file, which contains the JavaScript code to send the email using SMTPJS.

Expected result:
An email is sent to the designated email address with the pdf file without any problems.

Actual result:
No email was sent at all.

2. Describe what you’ve tried

#1: Attempt by putting file name and extension in quotes like this:

PFD_Articles.pdf -> ‘PFD_Articles.pdf’

Again, the actual result is produced, not the expected one.

3. Show some code

Email.send
(
    {
        Host: "smtp.gmail.com",
        Username: "[email protected]",
        Password: "password",
        To: '[email protected]',
        From: "[email protected]",
        Subject: "<h1> ddd </h1>",
        Body: "And this is the body",
        Attachments:
            [
                {
                    name: 'PFD_Articles.pdf'
                }
            ]
    }).then
(
    alert("Successful! Please check your email inbox. Otherwise, you may have to enter your email address again.")
);

I need to be able to generate multipart-form data and to convert that to string to store it locally. For example, if I generate the form data as follows:

  var form = new FormData();
  form.append('part1', 'part 1 data');
  form.append('part2', 'part 2 data');

I want to ask it to returns its rendering as a string (how it would get transmitted over web):

----------------------------900078007145468816304698
Content-Disposition: form-data; name="part1"

part 1 data
----------------------------900078007145468816304698
Content-Disposition: form-data; name="part2"

part 2 data
----------------------------900078007145468816304698--

Javascript is not exactly my strength, so hoping someone has a simple idea on how to do this.

I’m doing pretty good in R but can’t figure out how to translate this javascript (at least I think it’s javascript…might be python?) into R:

      /*
Author of the script: Carlos Bentes
*/

// Normalized Difference Vegetation Index
var ndvi = (B08-B04)/(B08+B04);

// Threshold for vegetation
var veg_th = 0.4;

// Simple RGB
var R = 2.5*B04;
var G = 2.5*B03;
var B = 2.5*B02;

// Transform to Black and White
var Y = 0.2*R + 0.7*G + 0.1*B;
var pixel = [Y, Y, Y];

// Change vegetation color
if(ndvi >= veg_th)
  pixel = [0.1*Y, 1.8*Y, 0.1*Y];

return pixel;

This is the Green City Index which is part of the repository of custom scripts that can be used with Sentinel-Hub services.

Specifically I’m having issues with

var pixel = [Y, Y, Y];

And

if(ndvi >= veg_th)
  pixel = [0.1*Y, 1.8*Y, 0.1*Y];

return pixel;

I think var pixel = [Y, Y, Y]; is the same as pixel <- c(Y, Y, Y)? Which means in the if statement I’d have

if(ndvi >= veg_th){ 
   pixel <- c(0.1*Y, 1.8*Y, 0.1*Y) 
   return(pixel)
}

But I’m not getting results: Error in if (ndvi >= veg_th) { : argument is not interpretable as logical

Thanks for taking a look!

I have this moving flame element that uses the canvas to display using JavaScript. Well when I refresh the page it works just fine, but the problem is the canvas is part of a template in a lesson that uses classic JS/Node/DOM and reads content from JSON data. So the lesson switches pages without refresh causing the canvas to not be created. So is there anyway to fix this?

So inside my function that reads the JSON data I have these lines

canvasFlame(); <---- this calls the function to build the canvas

let containFinal = document.getElementById('flame-container');
let canvasDem = document.getElementById('sketch-0');<------- the canvas container
containFinal.appendChild(canvasDem);<----- it's dropped into the "flame-container"

Here is the canvasFlame function (called in from a seperate file)
function canvasFlame(){

var particles = [];
let containFinal = document.getElementById('flame-container');
containFinal.width = 400;
containFinal.height = 400;

var Particle = function(x, y) {

    this.x = x + random(-10, 10);
    this.y = y + random(-10, 10);
    this.vx = random(-2.5, 2.5);
    this.vy = random(-5, 5);
    this.radius = (random() > 0.75) ? random(25, 50) : 1 + random(1, 20);
    this.lifespan = random(25, 50);
    this.charge = this.lifespan;
    this.color = {
        r: round(random(255)),
        g: round(random(75)),
        b: round(random(50))
    };
}

Particle.prototype = {

    update: function() {
        this.charge--;
        this.radius--;
        this.x += this.vx;
        this.y += this.vy;
    },

    draw: function(ctx) {

        var gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
        gradient.addColorStop(0, 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.opacity + ')');
        gradient.addColorStop(0.5, "rgba(" + this.color.r + ", " + this.color.g + ", " + this.color.b + ", " + this.opacity + ")");
        gradient.addColorStop(1, "rgba(" + this.color.r + ", " + this.color.g + ", " + this.color.b + ", 0)");

        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, TWO_PI, false);
        ctx.fill();
    }
};

Sketch.create({
    center: {},
    setup: function() {
        
        this.resize();

        for (var i = 0; i < 100; i++) {
            particles.push(new Particle(this.center.x, this.center.y));
        }
    },

    resize: function() {
        this.center.x = containFinal.width * 0.5;
        this.center.y = containFinal.height * 0.5;
    },

    draw: function() {

        this.globalCompositeOperation = "source-over";
        this.fillStyle = '#000000';
        this.fillRect(0, 0, containFinal.width, containFinal.height);
        this.globalCompositeOperation = "lighter";

        var p, ip = particles.length;
        
        while (ip--) {
            p = particles[ip];
            p.opacity = round(p.charge / p.lifespan * 100) / 100;
            p.draw(this);
            p.update();
            if (p.charge < 0 || p.radius < 0) {
                particles[ip] = new Particle(containFinal.x || this.center.x, containFinal.y || this.center.y);
            }
        }
    }
});

}

That file then calls the Sketch.create function in a seperate js file.
Here that code. [see below]

var Sketch=function(){function e(e){e=n(e||{},l);var t=”sketch-“+r++,o=e.hasOwnProperty(“canvas”),u=o?e.canvas:document.createElement(“canvas”);

switch(e.type){case m:try{s=u.getContext(“webgl”,e)}catch(d){}try{s=s||u.getContext(“experimental-webgl”,e)}catch(d){}if(!s)throw”WebGL not supported”;break;case c:try{s=u.getContext(“2d”,e)}catch(d){}if(!s)throw”Canvas not supported”;break;default:u=s=document.createElement(“div”)}return s.canvas=u,u.className=”sketch”,o?e.autoresize=!1:(e.container.appendChild(u),e.hasOwnProperty(“autoresize”)||(e.autoresize=l.autoresize),u.id=t),n(self,g),n(s,e),n(s,p),a(),e.autoresize&&i(),w.push(s),s.autostart&&setTimeout(s.start,0),s}function n(e,n){for(var t in n)e.hasOwnProperty(t)||(e[t]=n[t]);return e}function t(e){function n(e,n){return function(){e.call(n,arguments)}}var t={};for(var o in e)t[o]=”function”==typeof e[o]?n(e[o],e):e[o];return t}function o(e,n){e.length=0;for(var t=0,o=n.length;o>t;t++)e[t]=n[t];return e}function a(){function e(e){return M[e]||String.fromCharCode(e)}function n(e){s.mouse.ox=s.mouse.x,s.mouse.oy=s.mouse.y,s.mouse.x=e.x,s.mouse.y=e.y,s.mouse.dx=s.mouse.x-s.mouse.ox,s.mouse.dy=s.mouse.y-s.mouse.oy}function a(e){var n,o=t(e);o.original=e;for(var a=s.canvas,u=0,i=0;a;a=a.offsetParent)u+=a.offsetLeft,i+=a.offsetTop;if(o.touches&&o.touches.length)for(var r,c=o.touches.length-1;c>=0;c–)r=o.touches[c],r.x=r.pageX-u,r.y=r.pageY-i,n=A[c]||r,r.dx=r.x-n.x,r.dy=r.y-n.x,r.ox=n.x,r.oy=n.y,A[c]=t(r);else o.x=o.pageX-u,o.y=o.pageY-i,n=A.mouse||o,o.dx=o.x-n.x,o.dy=o.y-n.y,o.ox=n.x,o.oy=n.y,A.mouse=o;return o}

function u(e){
e.preventDefault(),e=a(e),o(s.touches,e.touches),n(s.touches[0]),s.touchstart&&s.touchstart(e),s.mousedown&&s.mousedown(e)
}
function r(e){
e=a(e),o(s.touches,e.touches),n(s.touches[0]),s.touchmove&&s.touchmove(e),s.mousemove&&s.mousemove(e)
}
function c(e){
if(e=a(e),e.touches.length)for(var n in A)e.touches[n]||delete A[n];else A={};s.touchend&&s.touchend(e),s.mouseup&&s.mouseup(e)
}
function m(e){
e=a(e),s.mouseover&&s.mouseover(e)
}
function d(e){
e=a(e),s.dragging||(x(s.canvas,”mousemove”,h),x(s.canvas,”mouseup”,v),y(document,”mousemove”,h),y(document,”mouseup”,v),s.dragging=!0),o(s.touches,[e]),s.touchstart&&s.touchstart(e),s.mousedown&&s.mousedown(e)
}
function h(e){
e=a(e),n(e),o(s.touches,[e]),s.touchmove&&s.touchmove(e),s.mousemove&&s.mousemove(e)
}
function f(e){
e=a(e),s.mouseout&&s.mouseout(e)
}
function v(e){
e=a(e),s.dragging&&(x(document,”mousemove”,h),x(document,”mouseup”,v),y(s.canvas,”mousemove”,h),y(s.canvas,”mouseup”,v),s.dragging=!1),delete A.mouse,s.touchend&&s.touchend(e),s.mouseup&&s.mouseup(e)
}
function w(e){
e=a(e),s.click&&s.click(e)
}
function l(n){s.keys[e(n.keyCode)]=!0,s.keys[n.keyCode]=!0,s.keydown&&s.keydown(n)}function g(n){s.keys[e(n.keyCode)]=!1,s.keys[n.keyCode]=!1,s.keyup&&s.keyup(n)}var M={8:”BACKSPACE”,9:”TAB”,13:”ENTER”,16:”SHIFT”,27:”ESCAPE”,32:”SPACE”,37:”LEFT”,38:”UP”,39:”RIGHT”,40:”DOWN”};for(var k in M)p.keys[M[k]]=!1;var A={};y(s.canvas,”touchstart”,u),y(s.canvas,”touchmove”,r),y(s.canvas,”touchend”,c),y(s.canvas,”mouseover”,m),y(s.canvas,”mousedown”,d),y(s.canvas,”mousemove”,h),y(s.canvas,”mouseout”,f),y(s.canvas,”mouseup”,v),y(s.canvas,”click”,w),y(document,”keydown”,l),y(document,”keyup”,g),y(window,”resize”,i)}function u(){if(!h){var e=Date.now();s.dt=e-s.now,s.millis+=s.dt,s.now=e,s.update&&s.update(s.dt),s.autoclear&&s.clear(),s.draw&&s.draw(s)}h=++h%s.interval,f=requestAnimationFrame(u)}function i(){if(s.autoresize){
var e=s.type===d?s.style:s.canvas;
s.fullscreen?(s.height=e.height=400,s.width=e.width=400):(e.height=s.height,e.width=s.width),s.resize&&s.resize()}}
var s,r=0,c=”canvas”,m=”web-gl”,d=”dom”,h=0,f=-1,v={},w=[],l={fullscreen:!0,autostart:!0,autoclear:!0,autopause:!0,autoresize:!0,container:document.body,interval:1,type:c},g={PI:Math.PI,TWO_PI:2*Math.PI,HALF_PI:Math.PI/2,QUARTER_PI:Math.PI/4,abs:Math.abs,acos:Math.acos,asin:Math.asin,atan2:Math.atan2,atan:Math.atan,ceil:Math.ceil,cos:Math.cos,exp:Math.exp,floor:Math.floor,log:Math.log,max:Math.max,min:Math.min,pow:Math.pow,round:Math.round,sin:Math.sin,sqrt:Math.sqrt,tan:Math.tan,random:function(e,n){return e&&”number”==typeof e.length&&e.length?e[Math.floor(Math.random()e.length)]:(“number”!=typeof n&&(n=e||1,e=0),e+Math.random()(n-e))}},p={millis:0,now:0/0,dt:0/0,keys:{},mouse:{x:0,y:0,ox:0,oy:0,dx:0,dy:0},touches:[],initialized:!1,dragging:!1,running:!1,start:function(){s.running||(s.setup&&!s.initialized&&(s.autopause&&(y(window,”focus”,s.start),y(window,”blur”,s.stop)),s.setup()),s.initialized=!0,s.running=!0,s.now=Date.now(),u())},stop:function(){cancelAnimationFrame(f),s.running=!1},toggle:function(){(s.running?s.stop:s.start)()},clear:function(){s.canvas&&(s.canvas.width=s.canvas.width)},destroy:function(){var e,n,t,o,a,u;w.splice(w.indexOf(s),1),s.stop();for(n in v){for(t=v[n],a=0,u=t.length;u>a;a++)e=t[a],x(e.el,n,e.fn);delete v[n]}s.container.removeChild(s.canvas);for(o in s)s.hasOwnProperty(o)&&delete s[o]}},y=function(){function e(e,n,t){v[n]||(v[n]=[]),v[n].push({el:e,fn:t})}
return window.addEventListener?function(n,t,o){
n.addEventListener(t,o,!1),e(n,t,o)
}:
window.attachEvent?function(n,t,o){n.attachEvent(“on”+t,o),e(n,t,o)}:function(n,t,o){n[“on”+t]=o,e(n,t,o)}}(),x=function(){function e(e,n,t){if(v[n])for(var o,a=v[n].length-1;a>=0;a–)o=v[n][a],o.el===e&&o.fn===t&&v[n].splice(a,1)}
return window.removeEventListener?function(n,t,o){n.removeEventListener(t,o,!1),e(n,t,o)}:window.detachEvent?function(n,t,o){n.detachEvent(“on”+t,o),e(n,t,o)}:(el[“on”+ev]=null,e(el,ev,fn),void 0)}();return{CANVAS:c,WEB_GL:m,DOM:d,instances:w,create:e}}();Date.now||(Date.now=function(){return+new Date}),function(){for(var e=0,n=[“ms”,”moz”,”webkit”,”o”],t=0;n.length>t&&!window.requestAnimationFrame;++t)window.requestAnimationFrame=window[n[t]+”RequestAnimationFrame”],window.cancelAnimationFrame=window[n[t]+”CancelAnimationFrame”]||window[n[t]+”CancelRequestAnimationFrame”];window.requestAnimationFrame||(window.requestAnimationFrame=function(n){var t=Date.now(),o=Math.max(0,16-(t-e)),a=window.setTimeout(function(){n(t+o)},o);return e=t+o,a}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})}();

This link can also be used to for reference bc it’s where the flames came from.
https://codepen.io/nikrowell/pen/doRBdZ

Thanks, I appreciate all the help.

I want to make a web app, which basically has some saved phone numbers and when I click it, the web app uses my phone’s sim to call that number and we can have a conversation through my PC, I am looking for an API, which basically lets me use my PC to make calls to people and talk through my PC mic, but I’ll be using my phone for the sim, is this possible? what API do I use?

i use the library Leaflet-WFST.
So I have both wms and wfs layers. With wms, everything is simple there is cql_filter.
I am writing a code where cql_filter is applied when clicking on the checkbox, here is the code:

$('#s23').click(function(){
if($("#s23").is(":checked")){
    if(layer.wmsParams.cql_filter != '' && layer.wmsParams.cql_filter.includes('layer_id=23') == false){
     layer.setParams({ cql_filter: layer.wmsParams.cql_filter + ' OR layer_id=23' });
     }else
     layer.setParams({ cql_filter: 'layer_id=23' });
     layer.setOpacity(1);
}else if(layer.wmsParams.cql_filter.includes(' OR layer_id=23') == true){ l_edit = layer.wmsParams.cql_filter.replace(" OR layer_id=23", "");
layer.setParams({ cql_filter: l_edit });
}else if(layer.wmsParams.cql_filter.includes('layer_id=23 OR ') == true){ l_edit = layer.wmsParams.cql_filter.replace("layer_id=23 OR ", "");
layer.setParams({ cql_filter: l_edit });
}else  layer.setParams({ cql_filter: '' });
     console.log(layer.wmsParams.cql_filter);
});
$('#s29').click(function(){
if($("#s29").is(":checked")){
   console.log(layer);
    if(layer.wmsParams.cql_filter != '' && layer.wmsParams.cql_filter.includes('layer_id=29') == false)
     layer.setParams({ cql_filter: layer.wmsParams.cql_filter + ' OR layer_id=29' });
     else
     layer.setParams({ cql_filter: 'layer_id=29' });
     layer.setOpacity(1);
     console.log(layer.wmsParams.cql_filter);
}else if(layer.wmsParams.cql_filter.includes(' OR layer_id=29') == true){ l_edit = layer.wmsParams.cql_filter.replace(" OR layer_id=29", "");
layer.setParams({ cql_filter: l_edit });
}else if(layer.wmsParams.cql_filter.includes('layer_id=29 OR ') == true){ l_edit = layer.wmsParams.cql_filter.replace("layer_id=29 OR ", "");
layer.setParams({ cql_filter: l_edit });
}else  layer.setParams({ cql_filter: '' });
     console.log(layer.wmsParams.cql_filter);
});

Here, if cql_filter is added when the checkbox is clicked, if it is empty, then cql_filter: ‘layer_id=23’ is triggered, and if there is something in cql_filter, then cql_filter: layer.wmsParams.cql_filter + ‘ OR layer_id=23’
also if the checkbox was cleared, then this layer_id is removed from cql_filter.

I can use this code:

var layer_23 = new L.Filter.EQ('layer_id', 23);
 //var OR = new L.Filter.Or(layer.options.filter, layer_23);
 layer.options.filter = layer_23;
layer.loadFeatures(layer_23);

To add a new filter, but I don’t know how I can remove or edit it.

The question is, how can the same thing be done?