How to append div for each div

Question

i have a list that i want to append each div when i click in "add". it works but every time that i click on "add" it works for all of my divs. i want to attend new div only for each div that i click. Here is my code:

$(".add").click(function() {
  $(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <ul class="pricepart">
    <li>
      <input type="text" />
      <span class="add">ADD+</span>
    </li>
  </ul>
</div>
<div class="content">
  <ul class="pricepart">
    <li>
      <input type="text">
      <span class="add">ADD+</span>
    </li>
  </ul>
</div>

Replace `$(".content")` with `$(this).closest('.content')`. – Ram Aug 24 '16 at 06:47 — Ram, Aug 24 '16 at 06:47

score 3 · Answer 1 · answered Aug 24 '16 at 06:50

You have to select this clicked button parent, like this:

$(".add").click(function () {
  $(this).parents(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

Working example: https://jsfiddle.net/k98tw1je/

Also you can use closest instead of parents

score 2 · Accepted Answer · answered Aug 24 '16 at 06:52

Because you are just applying the method to class and where ever it find the class the function will be executed.

You need to define that function should be executed on the parent class of the click element.

You can use .parents() or .closest() selector for the same like this

$(".add").click(function () {
  $(this).closest(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

OR

$(".add").click(function () {
  $(this).parents(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

Sometime .parents() creates issue if there is multilevel inheritance with same classes but in this case it will also work fine

i just updated my codes . could you help me how can i remove the last appended div each time i click on REMOVE? — inaz, Aug 24 '16 at 08:07

score 1 · Answer 3 · answered Aug 24 '16 at 06:51

The $(".content") selects all elements with the class instead you need to get the element based on the clicked .add element for that closest() method .

$(".add").click(function () {
  // inside the handler `this` refers to the dom object of 
  // clicked element and closest can be used to find nearest
  // ancestor element
  $(this).closest(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

score 1 · Answer 4 · answered Aug 24 '16 at 06:53

Try This-

$(".add").click(function() {
  $(this).parents().eq(2).append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  <ul class="pricepart">
    <li>
      <input type="text" />
      <span class="add">ADD+</span> 
    </li>
  </ul>
</div>
<div class="content">
  <ul class="pricepart">
    <li>
      <input type="text" />
      <span class="add">ADD+ </span>
    </li>
  </ul>
</div>

JSFiddle

How to append div for each div

4 Answers4