CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6915755
user6915755

Reputation:

jquery clone div for the first time

There is a form that i wanted to clone this form every time that ADD button clicked. my question is: how can i set display none to form for the first time ? and when Add button clicked set display block and for next time just clone the div?

$(document).ready(function(){
    $(".Add").click(function(){
	$(".formi").eq(0).clone().insertAfter(".formi:last");
	$(".cancel").click(function () {
    $(this).parents('.formi').remove();
      });
    });
});
.formi{border:1px solid #000;width:50%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
    <form class="formi">
        <input type="text" placeholder="name" />
        <select name="cars">
          <option value="">one</option>
          <option value="">two</option>
        </select>
        <button type="submit">ok</button>
        <span class="cancel">Cancel</span>
    </form>
</div>

Thanks

Upvotes: 0

Views: 558

Answers (5)

Yonas Hailu
Yonas Hailu

Reputation: 853

on click add class active and in the normal form make display none

 form {
  display: none;
 }
 form.active {
   display: block;
 }

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Try hide/show to show hide a element

$(document).ready(function() {
  $(".formi").hide(); //hide it at page ready you can use css for this
  $(".Add").click(function() {

    $(".formi").eq(0).clone().insertAfter(".formi:last").show(); //show it after you appended it 

  });
  $('.all').on('click', ".cancel", function() {
    $(this).parents('.formi').remove();
  });
});
.formi {
  border: 1px solid #000;
  width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>
Delegate your cancel click event and unwrap it from the first event

Upvotes: 2

Satpal
Satpal

Reputation: 133433

You can start with CSS rule i.e. display:none;. While inserting element use .show().

I will also recommend using .on() method implementing Event Delegation approach, when generating elements dynamically.

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().show().insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});
.formi {
  border: 1px solid #000;
  width: 50%;
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

Upvotes: 6

guradio
guradio

Reputation: 15565

$(document).ready(function() {
  $(".Add").click(function() {
    $(".hide").removeClass("hide");//remove the class hiding the form
    $(".formi").eq(0).clone().insertAfter(".formi:last");
    $(".cancel").click(function() {
      $(this).parents('.formi').remove();
    });
  });
});
.formi {
  border: 1px solid #000;
  width: 50%;
}
.hide {
  display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi hide"> 
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

Add class hide and then remove it on click

Upvotes: 0

Jerome
Jerome

Reputation: 1192

I think you can do something like this before your "click add" document.getElementsByClassName("youClass").style.display="none";

then when you want to show it again you change the display="theOneyouWant" (I guess when we click add)

Upvotes: 0

Related Questions