How do I add and remove divs using JQuery?

Question

I have this code I am working on create.blade.php

I have followed this question and this tutorial in order to replicate a div. I have managed to clone the div and display. My issue comes when I try removing the added div as it does not work. How do I go about it? I have added the remove function to my script.

$(document).ready(function() {
  $(".add").click(function() {
    $("#education-clone").clone().appendTo("#edu");
  });
  $(".remove").click(function() {
    $("#education-clone").remove(this);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile-card" id="education">
  <h5>Education</h5>
  <div id="edu">
    <div class="form-row" id="increment">
      <div class="form-group col-md-6">
        <label>School</label>
        <input type="text" class="form-control" name="school[]" placeholder="School/University">
      </div>
      <div class="form-group col-md-2">
        <label>From</label>
        <input type="date" class="form-control" name="school_from[]" placeholder="From">
      </div>
      <div class="form-group col-md-2">
        <label>To</label>
        <input type="date" class="form-control" name="school_to[]" placeholder="To">
      </div>

      <div class="form-group col-md-2">
        <label>Action</label>
        <button class="form-control btn add" type="button">Add</button>
      </div>
    </div>

    <div class="form-row" id="education-clone">
      <div class="form-group col-md-6">
        <label>School</label>
        <input type="text" class="form-control" name="school[]" placeholder="School/University">
      </div>
      <div class="form-group col-md-2">
        <label>From</label>
        <input type="date" class="form-control" name="school_from[]" placeholder="From">
      </div>
      <div class="form-group col-md-2">
        <label>To</label>
        <input type="date" class="form-control" name="school_to[]" placeholder="To">
      </div>

      <div class="form-group col-md-2">
        <label>Action</label>
        <button class="form-control btn-danger remove" type="button">Remove</button>
      </div>
    </div>
  </div>

  <br>
  <button class="btn">Next</button>
</div><br>

Can we answer or someone wants to comment - Otherwise i know it will be downvoted ? — Always Helping, Jul 05 '20 at 09:50
So many issues. 1. delegate 2. IDs need to be unique. 3. relative addressing — mplungjan, Jul 05 '20 at 09:51
Without giving the clone a class to find it by, you can try `$("#edu").on("click",".remove", function() { $(this).closest("div").closest("div").remove(); });` — mplungjan, Jul 05 '20 at 09:57
@mplungjan The code works well for removing however after I remove the add button does not work. — davidkihara, Jul 05 '20 at 10:06
1. Give the div you want to clone a class of containerDiv and 2. do this `$(document).ready(function() { $("#edu").on("click", ".add", function() { $("#education-clone").clone().appendTo("#edu"); }); $("#edu").on("click", ".remove", function() { if ($("#edu").find("div.containerDiv").length > 1) { $(this).parents("div.containerDiv").remove(); } }); });` — mplungjan, Jul 05 '20 at 10:15

Rounin · Answer 1 · 2020-07-06T16:18:40.597

-2

How do I add and remove divs using JQuery?

You won't need the jQuery library for an action as straightforward as this.

In vanilla javascript, to remove a <div> such as:

<div id="remove-me">...</div>

You can use the .remove() method:

let elementToRemove = document.getElementById('remove-me');
elementToRemove.remove();

edited Jul 06 '20 at 16:18

answered Jul 05 '20 at 09:46

Rounin

27,134
9
83
108

1. jquery. 2. missing delegation (the reason for the issue) 3. relative addressing is needed – mplungjan Jul 05 '20 at 09:50
1

Your answer is not relevant in any way to the question asked. OP needs something like `$("#edu").on("click",".remove", function() { $(this).closest("div").closest("div").remove(); });` – mplungjan Jul 05 '20 at 09:53

How do I add and remove divs using JQuery?

1 Answers1