jquery onclick by class

Question

I would like to create a click event on all input buttons that have the class "add-another". When the buttons are clicked, I want them to reveal next TWO divs with the class "hiddenDV". My event only works for the first element. I have also tried using the on() method and had no luck with this either.

$(".hiddenDV").hide();
$(".add-another").click(function() {
        $(this).nextAll('.hiddenDV:lt(2)').show();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel-body">
  <div class="row">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>

  <input type="button" class="btn btn-default extra-margin add-another" value="+" />

  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
    <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" class="btn btn-default" value="-" />
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
    <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" class="btn btn-default" value="-" />
  </div>
</div>

If you actually hide the .hiddenDV elements in CSS, then your code it working absolutely fine: jsfiddle.net/88645xca — Rory McCrossan
– Rory McCrossan, Commented Jun 19, 2017 at 9:51
in the example mark up the second + is inside the div meaning it is not sibling anymore this code works if the button and the hidden div are siblings — guradio
– guradio, Commented Jun 19, 2017 at 9:51
Your code works fine for me (if you start the hidden divs as display:none) — Pete
– Pete, Commented Jun 19, 2017 at 9:52
I have ammeneded my code to make it abit more accurate what I am trying to achieve. As you can see when you run it, it reveals the first two divs but when trying to click the second + button it doesnt reveal the third/fourth divs. — Abyssalwolf
– Abyssalwolf, Commented Jun 19, 2017 at 10:07

Rohit Sharma · Accepted Answer · 2017-06-19 11:12:49Z

2

I have modified your code now look at snippet its working now..!

$(document).ready(function(){
$('.hiddenDV').hide();
	$(".add-another").click(function() {	$(this).parents('.row').nextAll('.hiddenDV:lt(2)').show().next('.more-buttons').show();
});
	$(".remove-another").click(function() {
		$(this).parents('.row').hide().prev('.hiddenDV').hide();
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <div class="row">
    <div class="col-md-12">
      <input type="text" placeholder="name"/><br />
      <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    </div>
  </div>

  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
    <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" class="btn btn-default remove-another" value="-" />
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
  </div>
  <div class="row hiddenDV">
    <div class="col-md-12">
      <input type="text" placeholder="name"/>
    </div>
    <input type="button" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" class="btn btn-default remove-another" value="-" />
  </div>
</div>

As I have seen you have write in your question's description that My event only works for the first element.

Problem was that you was unable to find the next .hiddenDV at second time..! because this element was not the next element of .add-another button..!

So added this jQuery code..

$(this).parents('.row').nextAll('.hiddenDV:lt(2)').show().next('.more-buttons').show();

edited Jun 19, 2017 at 11:12

answered Jun 19, 2017 at 10:26

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abyssalwolf Over a year ago

Thanks for this just what i needed! Would adding a remove function to the - buttons be simply a case of copying the above jquery but saying prevAll and hide instead of show?

Rohit Sharma Over a year ago

OKay..! @Abyssalwolf Glad it helped...! I have also updated snippet to remove the inputs. Look again...!

Hardik Leuwa · Accepted Answer · 2017-06-19 11:02:24Z

 $(document).ready(function () {

            $(".add-another").bind("click", function () {
                var element = $(this).parent().next('div.hiddenDV');

                for (i = 0; i < 5; i++) {
                    if (element.is(':hidden')) {
                        break;
                    }
                    else {
                        element = element.next('div.hiddenDV');
                    }
                }

                element.show();
            });

            $(".remove-another").bind("click", function () {

                var element = $(this).parent().next('div.hiddenDV');

                for (i = 0; i < 5; i++) {
                    if (element.is(':hidden')) {
                        element = element.next('div.hiddenDV')
                    }
                    else {
                        break;
                    }
                }

                element.hide();
                
            });

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 <div class="row">
            <div class="col-md-12">
                <input type="text" placeholder="name" />
            </div>
             <input type="button" class="btn btn-default extra-margin add-another" value="+" />
            <input type="button" class="btn btn-default remove-another" value="-" />
        </div>
        <div id="dv1" class="row hiddenDV">
            <div class="col-md-12">
                <input type="text" placeholder="name" />
            </div>
            <input type="button" class="btn btn-default extra-margin add-another" value="+" />
            <input type="button" class="btn btn-default remove-another" value="-" />
        </div>
        <div  id="dv2" class="row hiddenDV">
            <div class="col-md-12">
                <input type="text" placeholder="name" />
            </div>
            <input type="button" class="btn btn-default extra-margin add-another" value="+" />
            <input type="button" class="btn btn-default remove-another" value="-" />
        </div>

Collectives™ on Stack Overflow

jquery onclick by class

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related