jQuery clone() Method

The clone() method creates an exact copy of selected elements, including their children and text content. The clone is not added to the page automatically — you must insert it where you want it. This is useful for duplicating content blocks, form rows, or UI components.

Basic Syntax

$(selector).clone()             // clone without events
$(selector).clone(true)         // clone with events included
$(selector).clone(true, true)   // clone with events and event data

What clone() Copies

clone()          → copies HTML structure + text + attributes
clone(true)      → also copies attached jQuery events
clone(true, true) → also copies events on child elements

Diagram: How clone() Works

  Original element (in the DOM):
  ┌────────────────────────────┐
  │ <div class="card">         │
  │   <h3>Product Title</h3>   │
  │   <p>Price: ₹500</p>       │
  │ </div>                     │
  └────────────────────────────┘

  .clone() creates a separate copy in memory:
  ┌────────────────────────────┐
  │ <div class="card">         │  ← Exact copy, not yet on the page
  │   <h3>Product Title</h3>   │
  │   <p>Price: ₹500</p>       │
  │ </div>                     │
  └────────────────────────────┘

  .appendTo("#container") inserts the copy into the page.

Basic Example — Duplicate a Card

HTML:
<div id="container">
    <div class="card">
        <h3>Sample Card</h3>
        <p>This is a card.</p>
    </div>
</div>
<button id="duplicateBtn">Duplicate Card</button>

jQuery:
$(document).ready(function() {
    $("#duplicateBtn").click(function() {
        $(".card").first().clone().appendTo("#container");
    });
});

Each click adds a copy of the first card to the container.

clone() with Events — clone(true)

Without true, cloned elements do not carry their jQuery event listeners. With true, the events come along with the copy.

$(document).ready(function() {
    $(".deleteBtn").on("click", function() {
        $(this).parent().remove();
    });

    $("#addRow").click(function() {
        // clone(true) ensures the delete button in the clone also works
        $(".row").first().clone(true).appendTo("#rowList");
    });
});

Diagram: clone() vs clone(true)

  Original .card has a click event attached

  .clone()       → Copy has NO click event
  .clone(true)   → Copy HAS the same click event

  Without true:  Clicking copied card → nothing happens
  With true:     Clicking copied card → event fires ✓

Modifying After Clone

You can change the clone before inserting it. This lets you personalise each copy.

$(document).ready(function() {
    var count = 1;

    $("#addItem").click(function() {
        count++;
        var newItem = $(".product-card").first().clone();
        newItem.find("h3").text("Product " + count);
        newItem.find(".product-id").text("ID-" + count);
        newItem.appendTo("#productGrid");
    });
});

Practical: Add Form Row Dynamically

HTML:
<table id="itemTable">
    <tr class="item-row">
        <td><input type="text" placeholder="Item name" /></td>
        <td><input type="number" placeholder="Qty" /></td>
        <td><button class="removeRow">Remove</button></td>
    </tr>
</table>
<button id="addRow">Add Row</button>

jQuery:
$(document).ready(function() {
    // Add new row
    $("#addRow").click(function() {
        var newRow = $(".item-row").first().clone(true);
        newRow.find("input").val("");  // clear values
        newRow.appendTo("#itemTable");
    });

    // Remove row (uses delegation for dynamically added rows)
    $("#itemTable").on("click", ".removeRow", function() {
        if ($(".item-row").length > 1) {
            $(this).closest("tr").remove();
        }
    });
});

clone() vs copy/paste HTML

Important Note on IDs

If the cloned element has an ID, the clone will also have the same ID. IDs must be unique on a page, so always change or remove the ID after cloning.

var copy = $("#uniqueBox").clone();
copy.attr("id", "uniqueBox-copy");  // give the clone a new ID
copy.appendTo("#wrapper");

Quick Summary

• clone() creates an exact duplicate of an element and its children.
• The clone is not on the page until you insert it with append(), prepend(), etc.
• Use clone(true) to copy jQuery event listeners along with the element.
• Modify the clone with jQuery methods before inserting to make each copy unique.
• Always update or remove duplicate IDs after cloning.