CODEWITHSUNDEEP
jquery
S. M. Shahinul Islam
S. M. Shahinul Islam

Reputation: 2800

Dynamically change id of element

I am appending elements. when I removing each I want update remaining elements.

for example

this are five elements.

<div id="rowCount2">
<div id="rowCount3">
<div id="rowCount4">
<div id="rowCount5">
<div id="rowCount6">

if i remove element with id rowCount4, following rowCount5 and rowCount6 should be changed to rowCount4 and rowCount5 receptively.

I have tried following, but this does not work.

 for(var k = rowCount; k < 7; k++){
    $('#rowCount'+k).attr('id','rowCount'+(k-1));
 }

Update

remove function

function removeRow(removeNum) {

            var row = $('#rowCount' + removeNum);
            var sel = row.find(':selected').val();
            var name = row.find(':selected').text();
            addRemoved(sel);
            console.log(field_options);

            $('.loop-count').each(
                    function () {
                        var selectCountId = ($(this).attr("id"));
                        myList = [];
                        $('#' + selectCountId).children('option').each(function () {
                            myList.push($(this).val())
                        });
                        if (myList.indexOf(sel) == -1) {
                            $('<option>').val(sel).text(name).appendTo('#' + selectCountId);
                        }
                    });
            row.remove();
            rowCount--;
}

Upvotes: 0

Views: 100

Answers (3)

sinisake
sinisake

Reputation: 11318

$('div').each(function(i) {
$(this).attr('id','rowCount'+parseInt(i+2));
});

since you have 2, as starting point.

http://jsfiddle.net/jjmf1gs1/

P.S. you can use index and apply another number for incrementation, but this way you will always maintain (+1) structure...

Upvotes: 1

DavidDomain
DavidDomain

Reputation: 15293

Here is an example of what you can do to change the value of the id attribute on the remaining elements.

$('.container').on('click', 'a', function() {
  var crntId = $(this).parent().attr('id').replace('rowCount', ''),
      elems = $(this).parent().nextUntil($(this).parent());
  if ($(this).parent().next().length != 0) {
    elems.each(function(index) {
      $(this)
      .html((parseInt(crntId) + index) + '<a href="#">Delete</a>')
      .attr('id', 'rowCount' + (parseInt(crntId) + index));
    });
    $(this).parent().remove();
  } else {
    $(this).parent().remove();
  }
});
.container div {
  margin: 0 auto;
  max-width: 720px;
  width: 100%;
  background-color: gray;
  margin-bottom: 4px;
  padding: 6px;
  color: white;
}

.container div > a {
  float: right;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <div id="rowCount2">2 <a href="#">Delete</a></div>
  <div id="rowCount3">3 <a href="#">Delete</a></div>
  <div id="rowCount4">4 <a href="#">Delete</a></div>
  <div id="rowCount5">5 <a href="#">Delete</a></div>
  <div id="rowCount6">6 <a href="#">Delete</a></div>
</div>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

function removeRow(removeNum) {

  var row = $('#rowCount' + removeNum);

  var sel = row.find(':selected').val();
  var name = row.find(':selected').text();
  addRemoved(sel);
  console.log(field_options);

  $('.loop-count').each(function() {
    var selectCountId = ($(this).attr("id"));
    myList = [];
    $('#' + selectCountId).children('option').each(function() {
      myList.push($(this).val())
    });
    if (myList.indexOf(sel) == -1) {
      $('<option>').val(sel).text(name).appendTo('#' + selectCountId);
    }
  });

  row.nextAll('div[id^="rowCount"]').attr('id', function(i, id) {
    return 'rowCount' + (id.replace('rowCount', '') - 1);
  })

  row.remove();
  rowCount--;
}

var rowCount = 6,
  field_options;
removeRow(3)

function addRemoved() {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="rowCount1">1</div>
<div id="rowCount2">2</div>
<div id="rowCount3">3</div>
<div id="rowCount4">4</div>
<div id="rowCount5">5</div>
<div id="rowCount6">6</div>

Upvotes: 1

Related Questions