CODEWITHSUNDEEP
javascriptjquery
J.Alan
J.Alan

Reputation: 85

Jquery remove script bad coding

What is a good way to write this script more dynamic:

I have a variable which can have a value up to 18.

If $count is 1 I want to remove everything up to 18.

If $count is 2 I want to remove everything up to 18.

And so on.

        if($count == 1) {
            $('#input-1').remove();
            // remove up to 18
        }
        if($count == 2) {
            $('#input-2').remove();
            // remove up to 18
        }
        if($count == 3) {
            $('#input-3').remove();
            // remove up to 18
        }
        ...
        if($count == 18) {
            $('#input-18').remove();
        }

I did this:

            for(var i = 0; i < 18; i++) {
                if($count== i) {
                    $('#input-'+i).remove();
                }
            }

but it does not remove the divs from i to 18

EDIT: (to be clear)

I want to check each, like $count == i then I want to remove from i to 18

Upvotes: 2

Views: 81

Answers (6)

Ousmane D.
Ousmane D.

Reputation: 56433

This should do:

for(var i = $count; i <= 18;i++){
   $('#input-'+i).remove();
}

EDIT

I want to check each, like $count == i then I want to remove from i to 18

The outer for loop allows us to check if i is equal to $count, if the expression is satisfied (true) then we simply begin another loop starting at i. Within the second for loop, we begin removing the elements from i and beyond. 

for(var i = 1; i <=18; i++) {
    if($count == i) {
       for(var j = i; j <= 18; j++){
         $('#input-'+j).remove();
       }
      return;
    }
}

Note - This will send a return value of undefined to the caller. However, you can specify a different return value if you wish to.

Upvotes: 2

dgo
dgo

Reputation: 3937

I believe you want this:

var start=$('input-'+$count);
var end=$('#input-18').index();
$('input').slice(start,end).remove();

If the only inputs you have are $('input-1) to $('#input-18'), you can skip the check and do:

  $('input').slice($count-1).remove();

Upvotes: 0

Kakashi Hatake
Kakashi Hatake

Reputation: 3036

Use the following.!

for (var i = $count; i <= 18; i++) {
  $('#input-' + i).remove();
}

Upvotes: 0

dschu
dschu

Reputation: 5362

The easiest method would be a loop with a variable using Template-Strings

const addElements = function() {
  // Add elements dynamically
  for (let i = 0; i < 10; i++) {
    const div = `<div id="element-${i}">I\'m ${i}</div>`;
    $('body').append(div);
  }
}

const removeElements = function() {
  // Remove elements dynamically
  for (let i = 0; i < 10; i++) {
    const $div = $(`div#element-${i}`);

    $div.remove();
  }
}


$('#addBtn').on('click', function() {
  addElements();
});

$('#removeBtn').on('click', function() {
  removeElements();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="removeBtn">Remove</button>
<button id="addBtn">Add</button>

Upvotes: 0

diavolic
diavolic

Reputation: 722

Something like this $("#input-"+$count).remove()

Upvotes: 1

Weedoze
Weedoze

Reputation: 13943

You can use a simple for loop

for(let i=$count;i<=18;i++){
    $('#input-'+i).remove();
}

This will iterate starting from $count to 18 and will remove all input with id between $count and 18

Upvotes: 0

Related Questions