CODEWITHSUNDEEP
javascriptjqueryhtml
Pablo
Pablo

Reputation: 1435

Add remove with numbering indicated dynamically

So currently I can easily add and remove multiple textarea

But what I'm trying to do is to put numbering per specific textarea

Here's my textarea

as you notice my default text area is Step 1

But I wanted to do is when I clicked add it will show another textarea that says

Step 2

  <div class="optionBox">
                <div class="block">
                    <div class="form-group">
                      <label for="exampleFormControlTextarea1">Step 1</label>
                      <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
                    </div>

                     <span class="remove">Remove</span>

                </div>
                <div class="block"> <span class="add">Add Option</span>

                </div>
            </div>

My Javascript

 $('.add').click(function () {
$('.block:last').before(' <div class="block"><div class="form-group"><label for="exampleFormControlTextarea1">Step</label><textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea></div><span class="remove">Remove</span></div>');
});

Here's the current output

enter image description here

Upvotes: 1

Views: 72

Answers (2)

Francis Leigh
Francis Leigh

Reputation: 1960

I removed the div.block surrounding the "add option" span and used .append on the newly added div.block-container element instead of .before to add the next textarea to the bottom of the options container. i think this reads a little better symantically.

Also using string interpolation i am able to insert the total number of div.block + 1 to track the number of textareas visible on the page.

Hope this helps.

$('.add').click(function () {
  const numberOfBlocks = $(".block").length;
  
  $(".block-container")
    .append(`
      <div class="block">
        <div class="form-group">
          <label for="exampleFormControlTextarea1">Step ${numberOfBlocks + 1}</label>
          <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>      
        </div>
        <span class="remove">Remove</span>
      </div>`
    );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
    <div class="block-container">
        
    </div>
    <span class="add">Add Option</span>
</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

To make this work you can add a span element with no content to the label within each .block. Then you can create a function which updates the number within that span based on the index of the element every time you add or remove a .block.

I would also strongly suggest that you clone elements instead of adding lots of HTML in to your JS logic, as this violates the Separation of Concerns principle due to tying the JS too closely with the HTML. In your case this can be done by simply adding one extra class on to the .block which holds the textarea elements. Try this:

$('.add').click(function() {
  let $lastBlock = $('.block.step:last');
  let $clone = $lastBlock.clone().insertAfter($lastBlock);
  $clone.find('textarea').val('');
  updateStepCounts();
});

$('.optionBox').on('click', '.remove', function() {
  if ($('.block.step').length > 1) {
    $(this).closest('.block').remove();
    updateStepCounts();
  }
});

let updateStepCounts = () => $('.block label span').text(i => i + 1);
updateStepCounts();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
  <div class="block step">
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Step <span></span></label>
      <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
    </div>
    <span class="remove">Remove</span>
  </div>
  <div class="block">
    <span class="add">Add Option</span>
  </div>
</div>

Upvotes: 2

Related Questions