javascript - 从查询中的网页中删除元素

Question

我有这段代码（Bootstrap 和 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>

权限： http ://serwer1356363.home.pl/pub/component/index2.html

在这个网页中，我有：

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

我也有 ID 1-4 的 removeMe。

我希望在单击具有 removeMe 类的 div 之后，例如 ID = 2 - 该页面已被删除：

1. obiect2
2. point2

我可以请你写代码吗？我想删除整个 obiect2 和 point2 块以及里面的内容（html 内容）

怎么做？

标签： javascriptjquery

Answer 1

您可以从 id 中获取数字，.removeMe并在 point 和 abject 的选择器中使用它来查找相应的元素。

$('.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>