Remove elements from webpage in query

Question

I have this code (Bootstrap and Jquery):

<div class="container">
  <div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                         </button>
        </div>
        <div class="modal-body mx-3">
          <div class="md-form mb-5">
            <i class="fas fa-user prefix grey-text"></i>
            <input type="text" id="form3" class="form-control validate val1" name="val1">
            <label data-error="wrong" data-success="right" for="form3">Title</label>
          </div>
          <div class="md-form mb-4">
            <i class="fas fa-envelope prefix grey-text"></i>
            <input type="email" id="form2" class="form-control validate val2" name="val2">
            <label data-error="wrong" data-success="right" for="form2">Desc</label>
          </div>
          <div class="md-form mb-4">
            <i class="fas fa-envelope prefix grey-text"></i>
            <label data-error="wrong" data-success="right" for="form2">
                               Coordinates click: 
                               <div class="coorX"></div>
                               x 
                               <div class="coorY"></div>
                            </label>
          </div>
        </div>
        <div class="modal-footer d-flex justify-content-center">
          <button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
        </div>
      </div>
    </div>
  </div>
  <div class="scalize imgpo">
    <img src="img/jacket.png" alt="" class="target ">
    <div class="item-point" data-top="130" data-left="300" id="point1">
      <div>
        <a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 1</h1>" data-placement="top" data-html="true" rel="tooltip"></a>
      </div>
    </div>
    <div class="item-point" data-top="180" data-left="462" id="point2">
      <div>
        <a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 2</h1>" data-placement="top" data-html="true" rel="tooltip"></a>
      </div>
    </div>
    <div class="item-point" data-top="380" data-left="215" id="point3">
      <div>
        <a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 3</h1>" data-placement="top" data-html="true" rel="tooltip"></a>
      </div>
    </div>
    <div class="item-point" data-left="357" data-top="458" id="point4">
      <div>
        <a href="#" class="toggle tooltips" title="<h1><b>xxxxx</b> <em>one</em> here too 4</h1>" data-placement="top" data-html="true" rel="tooltip"></a>
      </div>
    </div>
  </div>
</div>
<a href="" class="btn btn-default btn-rounded mb-4 formAdd" data-toggle="modal" data-target="#modalSubscriptionForm" style="display:none"></a>
<script type="text/javascript">
  $(document).ready(function() {

    $('.imgpo').click(function(e) {
      var posX = $(this).position().left,
        posY = $(this).position().top;
      $('.coorX').html((e.pageX - posX - 10));
      $('.coorY').html((e.pageY - posY - 10));
      $(".tooltip").tooltip("hide");
      $('.formAdd').click();
    });

    $('.saveBtn').click(function(e) {
      var val1 = $(".val1").val();
      var val2 = $(".val2").val();

      var values = {
        'val1': val1,
        'val2': val2
      };


      alert('Save');


      $.ajax({
        url: "save.php",
        type: "post",
        data: values,
        success: function(response) {
          alert('Save');
        },
        error: function(jqXHR, textStatus, errorThrown) {
          alert('Error');
        }


      });

    });


    $('.scalize').scalize({
      styleSelector: 'circle',
      animationPopoverIn: 'flipInY',
      animationPopoverOut: 'flipOutY',
      animationSelector: 'pulse2'
    });
    /*
                  $('.tooltips').tooltip({
             html: true,
                    trigger: 'click',
                    placement: 'top'
             })
                  */
    const $tooltip = $('.tooltips');
    $tooltip.tooltip({
      html: true,
      trigger: 'click',
      placement: 'top',
    });
    $tooltip.on('show.bs.tooltip', () => {
      $('.tooltip').not(this).remove();
    });
    $tooltip.on('click', (ev) => {
      ev.stopPropagation();
    })


  });
</script>
<div class="itemsBox">
  <form name="saveForm" action="#" method="post">
    <div class="obiect1">Obiect 1
      <div class="removeMe" id="1">X</div>
    </div>
    <div class="obiect2">Obiect 2
      <div class="removeMe" id="2">X</div>
    </div>
    <div class="obiect3">Obiect 3
      <div class="removeMe" id="3">X</div>
    </div>
    <div class="obiect4">Obiect 4
      <div class="removeMe" id="4">X</div>
    </div>
</div>

<input type="submit" value="Save" />
</form>

prview: http://serwer1356363.home.pl/pub/component/index2.html

In this webpage I have:

1. points on image points (id = point1 to point4),
2. objects (obiect1 to obiect4).

I have too removeMe with ID 1-4.

I would like that after clicking a div with the class removeMe, for example, ID = 2 - the page has been removed:

1. obiect2
2. point2

Could I ask you to write the code? I would like to delete entire blocks of obiect2 and point2 together with what is inside (html content)

How to do it?

Answer 1

You can get the number from the id of .removeMe and use this in the selectors for point and abject to find the corresponding elements.

 $('.removeMe').on('click', function() { var number = $(this).attr('id'); $('#point' + number).remove(); $('.obiect' + number).remove(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div> <div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div> <div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div> <div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div> <div class="scalize imgpo"> <img src="img/jacket.png" alt="" class="target "> <div class="item-point" data-top="130" data-left="300" id="point1"> <div> <a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 1</h1>" data-placement="top" data-html="true" rel="tooltip">point1</a> </div> </div> <div class="item-point" data-top="180" data-left="462" id="point2"> <div> <a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 2</h1>" data-placement="top" data-html="true" rel="tooltip">point2</a> </div> </div> <div class="item-point" data-top="380" data-left="215" id="point3"> <div> <a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 3</h1>" data-placement="top" data-html="true" rel="tooltip">point3</a> </div> </div> <div class="item-point" data-left="357" data-top="458" id="point4"> <div> <a href="#" class="toggle tooltips" title="<h1><b>xxxxx</b> <em>one</em> here too 4</h1>" data-placement="top" data-html="true" rel="tooltip">point4</a> </div> </div> </div>