Geek Answers Handbook

JQuery, how to automatically adjust the list of numbers when 1 from the list is deleted?

I want to automatically configure the list of numbers created with .append(). For example, if 4 items are added to the list that will be numbered from 2-4, respectively, and if I delete item number 3, item number 4 will automatically be number 3, and if I add a new item, it will be the last on the list. Here is my code below.

$('#display').click(function() {
  $('#show').show();
});
var c = 1;
$('#append').click(function() {
  var cnt = $('.cnt').val();
  for (var i = 0; i < cnt; i++) {
    c++;
    $('#inputs').append("<div id='inputs' name='" + c + "'>" + c + ".)<button id='remove' name='" + c + "'>X</button></div>");
  }
});
$(document).on('click', '#inputs #remove', function() {
  var nm = $(this).attr('name');
  $('div[name="' + nm + '"]').remove();
  c--;
});
#show {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<button id='display'>Display</button>
<div id='show'>
  <br>
  <input type='text' class='cnt' value='1' placeholder="num of append" />
  <button id='append'>+</button>
  <br>
  <div id='inputs'>
    1.)
  </div>
</div>
Run codeHide result

Here is the jsfiddle of the code.

+4
source share
4 answers

here is your answer

Fiddle here

$('#display').click(function() {
  $('#show').show();
});
var c = 1;
$('#append').click(function() {
  var cnt = $('.cnt').val();
  for (var i = 0; i < cnt; i++) {
    c++;
    $('#inputs').append("<div class='inputs' name='" + c + "'><span class='number'>" +c + "</span>.)<button class='remove' name='" + c + "'>X</button></div>");
  }
});
$(document).on('click', '#inputs .remove', function() {
  var nm = $(this).attr('name');
  $('div[name="' + nm + '"]').remove();
  c--;
resetCount();
});
function resetCount(){
    $('#inputs div.inputs').each(function(i){
        $('.number', $(this)).text(i+2);
        $('input', $(this)).attr('name', i+2);
    });
}
#remain,
#total {
  background-color: #333;
  width: 60px;
  height: 20px;
  color: #fff;
  padding: 0 10px;
}
input:focus {
  background-color: #000;
  color: #fff;
}
input {
  background-color: #ccc;
}
#show {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id='display'>Display</button>
<div id='show'>
  <br>
  <input type='text' class='cnt' value='1' placeholder="num of append" />
  <button id='append'>+</button>
  <br>
  <div id='inputs'>
    1.)
  </div>
</div>
Run codeHide result
+1
source

You must not use the same identifier for different elements

, , /

jQuery :

$('<ELEMENT TAG/>',{
  ATTRIBUTE: VALUE
});

jQuery $.each

$('#append').on('click', function(){
    $('<div/>', {
        'class': 'inputs',
        html: '<span class="count"></span><input type="text" class="time" name="0" value="00:00:00"/><button>X</button>'
    }).appendTo('#inputs');
    resetInputsCount();
});

$('#inputs').on('click', '.inputs button', function(){
    var $this = $(this);
    $this.parent().remove();
    resetInputsCount();
});

//The function that resets the count span text and the name value based on the current count of elements
function resetInputsCount(){
    //looping through elements
    $('#inputs div.inputs').each(function(i){
        //caching the current element in a var named $this
        var $this = $(this);
        //changing the count span text to i+2 the 2 is added because the index starts at 0 and there is already one element 1.)
        $('.count', this).text((i+2) + '.) ');
        //change the value of the input name
        $('input', $this).attr('name', i+2);
    });
}

JSFiddle

+2

, , , .

:

HTML

<div id='button'>
 <span>Add</span>
</div>
<div id='content'></div>

CSS

#button span {
    padding: 5px 15px;
    background: #ccc;
    cursor: pointer;
}
#button {
    margin: 5px 0;
}
.delete {
    cursor: pointer;
    padding: 0 5px;
    border: 1px solid gray;
}

JQuery

$(document).ready(function() {
    var index = 1;
    $('#button').on('click', function() {
        var add = '<div class="new"><span class="number">' + index + '</span><input type="text"/><span class="delete">x</span></div>';
        $('#content').append(add);
        index++;
    });
    $(document).on('click', '.delete', function() {
        index--;
        $(this).parent().remove();
        var index2 = 1;
        var newelement = $('.new');
        $(newelement).each(function() {
            $(this).find('.number').text(index2);
            index2++;
        });
    });

});
0

html ( )

: ( , )

$('#display').click(function() {
  $('#show').show();
});
var c = 1;
var inputs = [];


$('#append').click(function() {
  var cnt = $('.cnt').val();
  for (var i=0; i<cnt; i++) {
    c++;
    $div = $("<div id='input"+c+"' />").data('index', c);
    $span = $("<span />").text(c+".)");
    $button = $("<button class='input_remove' />").text("X");
    $input =  $("<input type='text' class='small' />").attr("name","input"+c);
    $div.append($div).append($span).append($input).append($button);
    $('#inputs').append($div);
  }
});


$(document).on('click', '.input_remove', function() {
  index = $(this).parent().data('index');
  $("#inputs").find('#input'+index).remove();
  c = 1;
  $("#inputs").find('div').each(function(index,ele){
    c++;
    $(ele).attr('id',"input"+c).data('index',c)
          .find("span").text(c+".)").end()
          .find("input").attr("name","input"+c);
  });
});
#show {
  display: none;
}
.small { width:100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<button id='display'>Display</button>
<div id='show'>
  <br>
  <input type='text' class='cnt' value='1' placeholder="num of append" />
  <button id='append'>+</button>
  <br>
  <div id='inputs'>
    1.)
  </div>
</div>
Hide result
-1

More articles:


All Articles