DEV Community

Ripon Uddin
Ripon Uddin

Posted on

Add Row (Clone)

Today, I will share a simple way to implement cloning and removing tr dynamically and how to keep the last tr without removing it.

*Requirements Below: *

  1. A Selector to append TR
  2. add/remove selector class
<table class="table table-hover">
      <thead>
         <tr>
            <th>Product </th>
            <th>Description</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody class="productServicesTbody">
            <tr>
                <td>
                   <input
                      type="text"
                      class="form-control"
                    />
                </td>

                <td>
                   <input
                      type="text"
                      class="form-control"
                   />
                </td>

                <td>
                    <button type="button" class="btn btn-primary btn-sm addTr">
                      Add
                    </button>

                   <button type="button" class="btn btn-danger btn-sm removeTr">
                      Delete
                    </button>
                </td>
             </tr>
         </tbody>
   </table>
Enter fullscreen mode Exit fullscreen mode

JS Code

$(document).ready(function() {
        $(document).on('click', '.addTr', function() {
            let $clone = $(this).closest('tr').clone();
            $clone.find('input').val('');

            $('.productServicesTbody').append($clone);
        });

        $(document).on('click', '.removeTr', function() {
            if ($('.productServicesTbody tr').length > 1) {
                $(this).closest('tr').remove();
            }
        });
    });
Enter fullscreen mode Exit fullscreen mode

Here .addTr is an add new tr button selector. And .removeTr is an add new tr button selector.

Please, let me know your queries in the comment section.

HappyCoding #Js #jQuery

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay