is there a way to combine something like this into a single function instead of defining so many?

Question

i tried doing a loop but that doesn't exactly work

i thought of trying regex as well but that doesn't work either

this code is a part of a bigger that uses jquery to dynamically add fields when user presses add new and deletes those when user presses delete so the classes and ids used have a pattern they follow. ie. this will be solved if i can do $(like .'/deleteimg[0-9]{1,}/') instead of the exact thing.

the solution i have in mind right now is writing a code that writes this code but while that relieves me of writing the code it doesn't exactly help the code so i don't want to do that unless its the only option

ill be surprised if I'm the first person to ever run into this problem but googling didn't really reveal any relevant answers

jQuery(function($){
$('.deleteimg1').click(function() {
    $('.1').remove();
});
});
jQuery(function($){
$('.deleteimg2').click(function() {
    $('.2').remove();
});
});
jQuery(function($){
$('.deleteimg3').click(function() {
    $('.3').remove();
});
});
jQuery(function($){
$('.deleteimg4').click(function() {
    $('.4').remove();
});
});
jQuery(function($){
$('.deleteimg5').click(function() {
    $('.5').remove();
});
});
jQuery(function($){
$('.deleteimg6').click(function() {
    $('.6').remove();
});
});
jQuery(function($){
$('.deleteimg7').click(function() {
    $('.7').remove();
});
});
jQuery(function($){
$('.deleteimg8').click(function() {
    $('.8').remove();
});
});
jQuery(function($){
$('.deleteimg9').click(function() {
    $('.9').remove();
});
});
jQuery(function($){
$('.deleteimg10').click(function() {
    $('.10').remove();
});
});

Answer 1

You can use for-loop like:

jQuery(function($) {
  for (let i = 1; i <= 10; i++) {
    $('.deleteimg'+ i).click(function() {
      $('.'+ i).remove();
    });
  }
});

Answer 2

Whenever you see this kind of thing, the usual approach is to ask yourself "What common things can I factor out?" In this case, it's everything except the digit. Another way to phrase that (the converse) is "What are the things that change that I can parameterize (pass into a function)?" In this case, the answer is "the digit."

Without changing your HTML, we're left with an unwieldy selector or a loop as in Simone Rossaini's answer, but if you can change your HTML so that instead of:

<img class="deleteimg1">

you have

<img class="deleteimg" data-index="1">

Then it can be:

jQuery(function($) {
    $(".deleteimg").on("click", function() {
        const num = $(this).attr("data-index");
        $(`.${num}`).remove();
    });
});

(Except note that it's not valid to start a class name in a class selector with a digit. If it works with jQuery, that's something jQuery's fixing for you.)

Even better, if there's some structural relationship between the elements, like this:

<div>
    <img src="...">
    <input type="button" class="deleteimg" value="X">
</div>

Then it can just be (assuming you want to remove the entire structure, not just the img):

jQuery(function($) {
    $(".deleteimg").on("click", function() {
        $(this).closest("div").remove();
    });
});

But if you can't change your HTML, Simone Rossaini's answer factors out the digits via a loop.

Answer 3

Array.from(Array(10).keys()).forEach((index) => {
  $(`.deleteimg${index + 1}`).click(function () {
    $(`.${index + 1}`).remove();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
  <button class="deleteimg1">deleteimg1</button>
  <div class="1">Node 1</div>
</div>
<div>
  <button class="deleteimg2">deleteimg2</button>
  <div class="2">Node 2</div>
</div>
<div>
  <button class="deleteimg3">deleteimg3</button>
  <div class="3">Node 3</div>
</div>
<div>
  <button class="deleteimg4">deleteimg4</button>
  <div class="4">Node 4</div>
</div>
<div>
  <button class="deleteimg5">deleteimg5</button>
  <div class="5">Node 5</div>
</div>
<div>
  <button class="deleteimg6">deleteimg6</button>
  <div class="6">Node 6</div>
</div>
<div>
  <button class="deleteimg7">deleteimg7</button>
  <div class="7">Node 7</div>
</div>
<div>
  <button class="deleteimg8">deleteimg8</button>
  <div class="8">Node 8</div>
</div>
<div>
  <button class="deleteimg9">deleteimg9</button>
  <div class="9">Node 9</div>
</div>
<div>
  <button class="deleteimg10">deleteimg10</button>
  <div class="10">Node 10</div>
</div>