OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to create new <div> / delete an existing <div> upon onClick in a fashion similar to creating a new pin on Pinterest? [closed]

  • Thread starter Thread starter Lama Dev Student
  • Start date Start date
L

Lama Dev Student

Guest
I want to be able to create a new upon clicking , and delete an existing upon clicking . Order matters here, so if I click the ABOVE a (see code below), a new would appear ABOVE the , and if I click the BELOW a , a new would appear BELOW the .

Below is my code:

Code:
const Chunk = () => {
    return (
        <div className="progress-chunk">
            <ChunkPinAdder onClick={handleClickAddChunkPin} />
            <ChunkPinDeleter onClick={handleClickDeleteChunkPin} />
            <ChunkPin />
            <ChunkPinAdder onClick={handleClickAddChunkPin} />
            <ChunkPinDeleter onClick={handleClickDeleteChunkPin} />
        </div>
    );
};

Below is a screenshot of my interface (Chunk pin deleter has not been added here): See screenshot for details

<p>I want to be able to create a new upon clicking , and delete an existing upon clicking . Order matters here, so if I click the ABOVE a (see code below), a new would appear ABOVE the , and if I click the BELOW a , a new would appear BELOW the .</p>
<p>Below is my code:</p>
<pre><code>const Chunk = () => {
return (
<div className="progress-chunk">
<ChunkPinAdder onClick={handleClickAddChunkPin} />
<ChunkPinDeleter onClick={handleClickDeleteChunkPin} />
<ChunkPin />
<ChunkPinAdder onClick={handleClickAddChunkPin} />
<ChunkPinDeleter onClick={handleClickDeleteChunkPin} />
</div>
);
};
</code></pre>
<p>Below is a screenshot of my interface (Chunk pin deleter has not been added here):
<a href="https://i.sstatic.net/fzhr0836.png" rel="nofollow noreferrer">See screenshot for details</a></p>
 

Latest posts

I
Replies
0
Views
1
Ihsan Sadat
I
Top