CODEWITHSUNDEEP
jqueryclone
Sujan Shrestha
Sujan Shrestha

Reputation: 1040

Duplicating and removing sections using Jquery

I have a form which i want to clone. The form looks like this.

<form method="post">
    <div id=duplicator>
        <div class="form-group col-md-6">
            <label>Client's Name</label>
            <input type="text" class="form-control" name="client_name" />
        </div>
        <div class="col-md-12">
            <div class="pull-left">
                <button type="button" class="btn btn-success add" onclick="duplicate()">ADD +</button>
                <button type="button" class="btn btn-danger remove">DEL -</button>
            </div>
        </div>
    </div>
    //Duplicator div close
    <div class="pull-right">
        <input type="submit" class="btn btn-success btn-xm submit" name="submit" value="Submit" />
    </div>
</form>

I duplicated the Division using following code:

var i = 0;
var original = document.getElementById('duplicator');

function duplicate() {
    var clone = original.cloneNode(true);
    clone.id = "duplicat0r" + ++i;
    original.parentNode.appendChild(clone);
}

But the divisions are cloning after the submit button. I want to insert the cloned div before the submit button.

and how to remove the cloned division on clicking delete button.

Upvotes: 0

Views: 2351

Answers (4)

Mohammad
Mohammad

Reputation: 21489

Use clone() to copy element and use before() to insert element before selector.

$(".add").click(function(){
    var clone = $(".form-group:first").clone();
    clone.find("input").val("");
    $(".buttonBox").before(clone);
});

$(".remove").click(function(){
    $(".form-group:last").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=duplicator>
    <div class="form-group col-md-6">
        <label>Client's Name</label>
        <input type="text" class="form-control" name="client_name" />
    </div>
    <div class="col-md-12 buttonBox">
        <div class="pull-left">
            <button type="button" class="btn btn-success add">ADD +</button>
            <button type="button" class="btn btn-danger remove">DEL -</button>
        </div>
    </div>
</div>
<div class="pull-right">
    <input type="submit" />
</div>

Upvotes: 2

zer00ne
zer00ne

Reputation: 43930

This demo will:

  • Initially have a text input, add button, and submit button.

  • Click add button to add a group of cloned form elements.

  • This clone is appended to the form.

  • Each clone has a delete button.

  • Click the delete button to remove the clone.

  • There will always be at least one form-group.

SNIPPET

var i = 0;
var original = document.getElementById('set');
var form1 = document.getElementById('form1');
var btn1 = form1.querySelector('button');

function duplicate() {
  i++;
  var clone1 = original.cloneNode(true);

  clone1.id = "clone" + i;
  form1.appendChild(clone1);

  btn1.id = "btn" + i;
}

function delDupe() {

  var clone1 = document.getElementById('clone' + i);

  if (!clone1) {
    return false;
  }

  form1.removeChild(clone1);

  i--;
}
body {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
section {
  position: absolute;
  overflow: auto;
  width: 100vw;
  height: 100vh;
}
form {
  margin-bottom: 30px;
}
label {
  margin-top: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<section>

  <form id="form1" name="form1" method="post">

    <fieldset id='set' class="set">

      <div class="form-group col-md-6">

        <label>Client's Name</label>

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

      </div>

      <div class="col-md-12 pull-left">

        <button class="btn btn-danger remove" onclick="delDupe()">DEL -</button>

      </div>

    </fieldset>

  </form>


  <div class="col-md-12 pull-left">

    <button type="button" class="btn btn-success add" onclick="duplicate()">ADD +</button>

  </div>

  <div class="pull-right">

    <input type="submit" class="btn btn-success btn-xm submit" name="submit" value="Submit" form="form1" />

  </div>

</section>

Upvotes: 1

frnt
frnt

Reputation: 8795

Try this,

$(document).ready(function(){
$("form").on('click','.add',function(){
    var addd = $(".col-md-6").first().clone();
    $(".col-md-12").before(addd);
});
$("form").on('click','.remove',function(e){
    var subb = $(".col-md-6").last().remove();

});
});

Upvotes: 0

StaticBeagle
StaticBeagle

Reputation: 5175

Try this:

$(document).ready(function() {
    var last12 = $('.col-md-12').last();
    $(document).on('click', '.add', function() {
        $('.col-md-6').last().clone().insertBefore(last12);  
    });
    $(document).on('click', '.remove', function() {
        if($('.col-md-6').length > 1) {
            $('.col-md-6').last().remove();
        }
    });
});

Here is a JSFiddle
https://jsfiddle.net/noz2s4nh/6/

Upvotes: 1

Related Questions