When the li is clicked, replicate it and display it in a separate div

Question

When the li is clicked, replicate it and display it in a separate div

When a list item is clicked, I want to clone it and display it in a separate div. If another list item is clicked, the previously displayed item should be replaced with the newly clicked one.

Below is my code along with a link to the codepen where you can view it: https://codepen.io/AnthonyDavid/pen/xxqmqQY

$('li').click(function() {
  $(this).each(function(i) {
    $("<div class='special'>")
      .append($(this).contents().clone())
      .appendTo('#container');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<ul>
  <li><a href="">First</a></li>
  <li><div>Second</div></li>
  <li><span>third</span></li>
  <li><h4>Fourth</h4></li>
</ul>

javascript html jquery css

Answer 1

Answer №1

avoid triggering any action when clicking on a

$('li a').click((e)=>{e.preventDefault();});
$('li').click(function() {
  $(this).each(function(i) {
    $("<div class='special'>")
      .append($(this).contents().clone())
      .appendTo('#container');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<ul>
  <li><a href="">First</a></li>
  <li><div>Second</div></li>
  <li><span>third</span></li>
  <li><h4>Fourth</h4></li>
</ul>

Answer 2

avoid triggering any action when clicking on a

$('li a').click((e)=>{e.preventDefault();});
$('li').click(function() {
  $(this).each(function(i) {
    $("<div class='special'>")
      .append($(this).contents().clone())
      .appendTo('#container');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<ul>
  <li><a href="">First</a></li>
  <li><div>Second</div></li>
  <li><span>third</span></li>
  <li><h4>Fourth</h4></li>
</ul>

Answer 3

Answer №2

I have implemented a click handler for the anchor tags to prevent page redirection and maintain expected functionality.

Modified the code to handle only one item at a time.

$('li').click(function(event) {
  $(this).each(function(i) {
    var data = $("<div class='special'>")
      .append($(this).contents().clone())
    $('#container').html(data);
  });
});

$('.list-wrapper a').click(function(event){
  event.preventDefault();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<ul class='list-wrapper'>
  <li><a href="">First</a></li>
  <li><div>Second</div></li>
  <li><span>third</span></li>
  <li><h4>Fourth</h4></li>
</ul>

Answer 4

I have implemented a click handler for the anchor tags to prevent page redirection and maintain expected functionality.

Modified the code to handle only one item at a time.

$('li').click(function(event) {
  $(this).each(function(i) {
    var data = $("<div class='special'>")
      .append($(this).contents().clone())
    $('#container').html(data);
  });
});

$('.list-wrapper a').click(function(event){
  event.preventDefault();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<ul class='list-wrapper'>
  <li><a href="">First</a></li>
  <li><div>Second</div></li>
  <li><span>third</span></li>
  <li><h4>Fourth</h4></li>
</ul>

When the li is clicked, replicate it and display it in a separate div

Answer №1

Answer №2

Similar questions

Is it possible to incorporate dynamic variables into the directives of a nested loop? Plus, thoughts on how to properly declare variables in a node.js environment

Utilizing _.partial on a single-argument function

Tips for implementing a for loop within a Bootstrap-Popover using JavaScript

How can I align my logo on the website header separately from the menu tabs while keeping them on the same row?

JavaScript Update Function for Pointers in Parse.com - Modify a Row with a Pointer

Prevent duplicate form submissions when reloading using AJAX and Solve the header modification restriction issue

Is it not possible to include Infinity as a number in JSON?

JavaScript allows for the hiding of the Android navigation bar on web apps in Chrome, which includes the virtual back, home screen, and other buttons

Scheduled Job unable to complete post request

Stopping autoplay in Swiper as soon as you hover over it

Learn how to use Javascript and ASP.NET to refresh the parent page in Mozilla Firefox browser

You are unable to declare a variable within an AJAX function using jQuery

Using React to Retrieve Array Data from an API and Implementing Filtering

What's preventing me from accessing children in three.js group?

Making HTTP requests to the Gmail API

Calculate averages of an array and show them when the page loads using Vue

Vue fails to reflect changes in data when it is updated

Error in custom class using vanilla JavaScript: "Error: Unable to assign innerHTML to an undefined property"

What is the reason behind the Nexus 4 (with Chrome for Android) displaying a window size of 384x519 while the screenshot depicts it as 768x1038

Having trouble with accessing PHP data through jQuery's AJAX response