Add HTML to the nearest div containing a specific class when a button is clicked using JavaScript and jQuery

Question

Add HTML to the nearest div containing a specific class when a button is clicked using JavaScript and jQuery

Here is the HTML setup I'm working with:

<div class='form-row'>
    <div class='col-2'>
        Blah Blah
    </div>
    <div class='col-4'>
        <button type='button' class='add_row'>+</button>
    </div>
</div>

When the add_row button is clicked, I want to add another form-row div right next to the closest existing form-row div. The end result should look like this:

<div class='form-row'>
    <div class='col-2'>
        Blah Blah
    </div>
    <div class='col-4'>
        <button type='button' class='add_row'>+</button>
    </div>
</div>
<div class='form-row'>
    <div class='col-2'>
        Blah Blah
    </div>
    <div class='col-4'>
        <button type='button' class='add_row'>+</button>
    </div>
</div>

I attempted to use jQuery with the following script:

$(document).on('click', '.add_row', function () {

    $(this).closest('.form-row').append("<div class='form-row'>div contents</div>");

 });

However, it ends up adding the new div AFTER the direct parent of the button (<div class='col-4'>).

What would be the correct jquery code to append the new div to the closest div with a specified class instead?

javascript jquery html css

Answer 1

Answer №1

If you're looking to include a sibling in the form-row, rather than its content, you have the option of using either insertAfter() or after().

$(document.body).on('click', '.add_row', function (e) {
  $(e.target).closest('.form-row').after('<div class="form-row">Content</div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form-row'>
  <div class='col-2'>
    Blah Blah
  </div>
  <div class='col-4'>
    <button type='button' class='add_row'>+</button>
  </div>
</div>
<div class='form-row'>
  <div class='col-2'>
    Blah Blah
  </div>
  <div class='col-4'>
    <button type='button' class='add_row'>+</button>
  </div>
</div>

Answer 2

If you're looking to include a sibling in the form-row, rather than its content, you have the option of using either insertAfter() or after().

$(document.body).on('click', '.add_row', function (e) {
  $(e.target).closest('.form-row').after('<div class="form-row">Content</div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form-row'>
  <div class='col-2'>
    Blah Blah
  </div>
  <div class='col-4'>
    <button type='button' class='add_row'>+</button>
  </div>
</div>
<div class='form-row'>
  <div class='col-2'>
    Blah Blah
  </div>
  <div class='col-4'>
    <button type='button' class='add_row'>+</button>
  </div>
</div>

Answer 3

Answer №2

slight modification in your code

$(document).on('click', '.add_row', function (e) {
  $(this).closest('.form-row').clone().insertAfter($(this).closest('.form-row'));
});

Answer 4

slight modification in your code

$(document).on('click', '.add_row', function (e) {
  $(this).closest('.form-row').clone().insertAfter($(this).closest('.form-row'));
});

Answer 5

Answer №3

update: make use of $(el).after() as recommended by @Taplar. See modified code below

When utilizing $(el).append(...), you are actually appending within $(el). The desired action should be to append to the parent of $(el), which is represented by $(el).parent().

$(function() {
  $(document).on('click', '.add_row', function () {

  $(this).closest('.form-row').after("<div class='form-row'>div contents</div>");
 });
});

If your intention is to duplicate the .form-row, it is necessary to clone it before performing the append operation.

$(function() {
  $(document).on('click', '.add_row', function () {
    const $formRow = $(this).closest('.form-row');
    $formRow.parent().after($formRow.clone());
  });
});

For reference, here is the Vanilla JavaScript equivalent:

const $formRow = document.querySelector('.form-row');

document.onclick = (e) => {
  if (!e.target.classList.contains('add_row')) return;
  $container.after($formRow.cloneNode(true));
};

Answer 6

update: make use of $(el).after() as recommended by @Taplar. See modified code below

When utilizing $(el).append(...), you are actually appending within $(el). The desired action should be to append to the parent of $(el), which is represented by $(el).parent().

$(function() {
  $(document).on('click', '.add_row', function () {

  $(this).closest('.form-row').after("<div class='form-row'>div contents</div>");
 });
});

If your intention is to duplicate the .form-row, it is necessary to clone it before performing the append operation.

$(function() {
  $(document).on('click', '.add_row', function () {
    const $formRow = $(this).closest('.form-row');
    $formRow.parent().after($formRow.clone());
  });
});

For reference, here is the Vanilla JavaScript equivalent:

const $formRow = document.querySelector('.form-row');

document.onclick = (e) => {
  if (!e.target.classList.contains('add_row')) return;
  $container.after($formRow.cloneNode(true));
};

Add HTML to the nearest div containing a specific class when a button is clicked using JavaScript and jQuery

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to create a line break within a loop in React?

Creating an installation package for an Electron application on Windows

I am looking to implement a Mouseover effect on my Canvas element using JavaScript

Turning off the ability to horizontally scroll in an iframe using touch controls

Sorting through a collection by using a nested array

Issues with JavaScript PHP Ajax request

Tips for adjusting the width of a div when printing

Vue.js: Incorporating a client-side restful router using vue-router and a state manager

Using justify-content-between in a div container with only two items will not produce the desired effect

A Guide on Accessing Promise Results in AngularJS

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

Utilizing PHP to create a loop that processes two submitted forms

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

codeigniter jquery ajax form submission issue, works in all cases except when integrated

Similar to utilizing remote_function with the help of jquery and jquery-rails

Issue encountered while configuring 'innerHTML' in xmlHttp.onreadystatechange function

Gain entry to Zurb Foundation for Apps modules within your AngularJS application

How can we ensure that the load more button disappears at the appropriate moment in this Vue 3 application?

Setting the default value for a useRef<HTMLInputElement> in ReactJs with Typescript

Error in processing JSON data due to numerical discrepancy