CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin AJ
Martin AJ

Reputation: 6697

How can I define select one element in jQuery?

Here is my code:

$(".add_more_file").on("click", function(){
  var $input = $(this).siblings('input').clone();
  $input.insertBefore($(this));
})
a, input{
  display: block;
  margin-bottom: 5px;
}
a{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
    <input  class="upload"  type="file" name="activity_licenses" required />
    <a class="add_more_file" style="display:block">Add more file</a>
</div>

When I click on that button twice, I will have 4 inputs. While I want to have 2 inputs. I know, it's because for the second time, two elements will be matched in the siblings function. Any idea?

Upvotes: 0

Views: 83

Answers (6)

Shafizadeh
Shafizadeh

Reputation: 10340

All you need is using .prev() (which only selects the previous element, not all previous ones) instead of .siblings(). Try this:

$(".add_more_file").on("click", function() {
  var $input = $(this).prev('input').clone().val("");
  $input.insertBefore($(this));
})
a,
input {
  display: block;
  margin-bottom: 5px;
}

a {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
  <input class="upload" type="file" name="activity_licenses" required />
  <a class="add_more_file" style="display:block">Add more file</a>
</div>

Upvotes: 2

Mamun
Mamun

Reputation: 68933

Try $(this).siblings('input:eq(0)') to target the first input. To clear the in input value if exists use .val(""):

$(".add_more_file").on("click", function(){
  var $input = $(this).siblings("input:eq(0)").clone().val("");
  // val("") will clear the value from cloned input if there is any
  $input.insertBefore($(this));
});
a, input{
  display: block;
  margin-bottom: 5px;
}
a{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
    <input  class="upload"  type="file" name="activity_licenses" required />
    <a class="add_more_file" style="display:block">Add more file</a>
</div>

Upvotes: 1

Kavindra
Kavindra

Reputation: 1707

Use last() to clone only the last input.

$(".add_more_file").on("click", function(){
      var $input = $(this).siblings('input').last().clone().val("");
          $input.insertBefore($(this));
    })
a, input{
  display: block;
  margin-bottom: 5px;
}
a{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
    <input  class="upload"  type="file" name="activity_licenses" required />
    <a class="add_more_file" style="display:block">Add more file</a>
</div>

Upvotes: 1

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

You can use 'input:first' to only select first input and not all or use $('<input class="upload" type="file" name="activity_licenses" required />') to create a brand new input element

    $(".add_more_file").on("click", function(){
      var $input = $('<input  class="upload"  type="file" name="activity_licenses" required />');
          $input.insertBefore($(this));
    })
a, input{
  display: block;
  margin-bottom: 5px;
}
a{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
    <input  class="upload"  type="file" name="activity_licenses" required />
    <a class="add_more_file" style="display:block">Add more file</a>
</div>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Your selector siblings('input') selects all the input elements in the div, which is 1 in the first click, 2 in the second one etc.

Select only 1 input for clone, you can keep a reference to the original element and keep cloning it

var $file = $('.w_activity_licenses_inputs input.upload');
$(".add_more_file").on("click", function() {
  $file.clone().insertBefore(this);
})
a,
input {
  display: block;
  margin-bottom: 5px;
}

a {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
  <input class="upload" type="file" name="activity_licenses" required />
  <a class="add_more_file" style="display:block">Add more file</a>
</div>

Upvotes: 1

pouyan
pouyan

Reputation: 3439

You can use .first() function to get just first sibling element.

    $(".add_more_file").on("click", function(){
      var $input = $(this).siblings('input').first().clone();
          $input.insertBefore($(this));
    })
a, input{
  display: block;
  margin-bottom: 5px;
}
a{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
    <input  class="upload"  type="file" name="activity_licenses" required />
    <a class="add_more_file" style="display:block">Add more file</a>
</div>

Upvotes: 2

Related Questions