javascript - 一起删除DIV和图像标记

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        在14小时前关闭。



我在DOM中动态显示多行。

使用“ .remCF”，我可以删除行记录，但同时我想从图像中删除图像斑点/标记

单击删除链接时，将发生以下情况：

图像上存在的所有SPOT / MARKER都将被删除。

我想从图像中删除特定的行号/标记。

$(document).ready(function() {
  $("#<%= imagehs.ClientID %>").on("click", function(event) {
    $("#textboxX").html("");
    $("#textboxY").html("");
    $("#textboxBPart").html("");
    $("#divSaveDynamicDis").html("");
    var values = new Array();
    //var x = event.pageX - this.offsetLeft;
    //var y = event.pageY - this.offsetTop;

    var x = event.pageX;
    var y = event.pageY;
    //$(".marker").remove();
    $("body").append(
      $('<div class="marker"></div>').css({
        position: 'absolute',
        //top: y + 'px',
        //left: x + 'px',
        top: event.pageY + 'px',
        left: event.pageX + 'px',
        width: '10px',
        height: '10px',
        background: '#dd4b39',
        'border-radius': '10px'
      })
    );

    $("#textboxX").append('<div><input type="text" value="' + x + '" id="txtX" name="txtX"/></div>');
    $("#textboxY").append('<div><input type="text" value="' + y + '" id="txtY" name="txtY"/></div>');
    $("#textboxBPart").append("<div><input type='text' id='txtName' name='txtName'/></div>");
    var $r = $('<button />', {
      type: 'button',
      text: 'Refresh Data',
      id: 'btn_refresh'
    });
    var $cancle = $('<button />', {
      type: 'button',
      text: 'Cancle',
      id: 'btn_cancle'
    });
    $("#divSaveDynamicDis").append($r);
    $("#divSaveDynamicDis").append($cancle);
    $r.on('click', function() {
      var NewData = '<div class="col-sm-12">' + x + '   ' + y + '  ' + txtName.value + ' &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a> </div>';
      $("#divdynamicData").append(NewData);
      $("#textboxX").html("");
      $("#textboxY").html("");
      $("#textboxBPart").html("");
      $("#divSaveDynamicDis").html("");
    });
    $('.marker').on('click', function() {
      $(this).remove();
      $(this).find('divdynamicData').html("");
      //$("#divdynamicData").html("");
      //$(this).closest('#divdynamicData').fadeOut();
    });
    //$("#divdynamicData").live('click', '.remCF', function () {
    
    // HYPERLINK THAT DELETES TOO MUCH
    
    $("#divdynamicData").on('click', '.remCF', function() {

      $(this).parent().remove();
      $(".marker").each(function() {
        //var image = $(this).children("img");
        //image.remove();
        //$("#photoholder").append(image);
        $(this).remove();
      });

    });
    $cancle.on('click', function() {
      $("#textboxX").html("");
      $("#textboxY").html("");
      $("#textboxBPart").html("");
      $("#divSaveDynamicDis").html("");

    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最佳答案

我对代码进行了一些更改，可能会对您有所帮助。由于我们没有您的可执行代码，因此可能会有一些小错误。

$(document).ready(function() {
  $("#<%= imagehs.ClientID %>").on("click", function(event) {
    $("#textboxX").html("");
    $("#textboxY").html("");
    $("#textboxBPart").html("");
    $("#divSaveDynamicDis").html("");
    var values = new Array();
    //var x = event.pageX - this.offsetLeft;
    //var y = event.pageY - this.offsetTop;

    var x = event.pageX;
    var y = event.pageY;
    //$(".marker").remove();
    $("body").append(
      $('<div class="marker m_'+x+'_'+y+'"></div>').css({
        position: 'absolute',
        top: y + 'px',
        left: x + 'px',
        //top: event.pageY + 'px',
        //left: event.pageX + 'px',
        width: '10px',
        height: '10px',
        background: '#dd4b39',
        'border-radius': '10px'
      })
    );

    $("#textboxX").append('<div><input type="text" value="' + x + '" id="txtX" name="txtX"/></div>');
    $("#textboxY").append('<div><input type="text" value="' + y + '" id="txtY" name="txtY"/></div>');
    $("#textboxBPart").append("<div><input type='text' id='txtName' name='txtName'/></div>");
    var $r = $('<button />', {
      type: 'button',
      text: 'Refresh Data',
      id: 'btn_refresh'
    });
    var $cancle = $('<button />', {
      type: 'button',
      text: 'Cancle',
      id: 'btn_cancle'
    });
    $("#divSaveDynamicDis").append($r);
    $("#divSaveDynamicDis").append($cancle);
    $r.on('click', function() {
      var NewData = '<div class="col-sm-12">' + x + '   ' + y + '  ' + txtName.value + ' &nbsp; <a href="javascript:void(0);" class="remCF" data-marker="m_'+x+'_'+y+'">Remove</a> </div>';
      $("#divdynamicData").append(NewData);
      $("#textboxX").html("");
      $("#textboxY").html("");
      $("#textboxBPart").html("");
      $("#divSaveDynamicDis").html("");
    });
    $('.marker').on('click', function() {
      $(this).remove();
      $(this).find('divdynamicData').html("");
      //$("#divdynamicData").html("");
      //$(this).closest('#divdynamicData').fadeOut();
    });
    //$("#divdynamicData").live('click', '.remCF', function () {

    // HYPERLINK THAT DELETES TOO MUCH

    $("#divdynamicData").on('click', '.remCF', function() {
      marker_ref = $(this).attr('data-marker')
      $('.marker.'+marker_ref).remove()     
      $(this).parent().remove();


    });
    $cancle.on('click', function() {
      $("#textboxX").html("");
      $("#textboxY").html("");
      $("#textboxBPart").html("");
      $("#divSaveDynamicDis").html("");

    });

  });
});

我有added a class to marker div，并添加了"data-marker" attribute to remCF。现在，当您单击remCF时，它将搜索具有该类的标记div，仅删除该标记div。

希望这会帮助你。

关于javascript - 一起删除DIV和图像标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59799096/

上一篇：css - Bootstrap4 问题 : proper column structure inside and outside a container

下一篇：css - flexbox 试图对齐这些图像我做错了什么？

相关文章：

javascript - 如果数据无效，则阻止文本框值更新

javascript - 如何检测调用 jquery 脚本的内容

php - 搜索设施结果 PhP

javascript - Angular JS 方法 GET 在 CONFIG 之后进入 RUN

javascript - HTML 生成图像链接？

javascript - HTML5视频截图

javascript - 如何在Android Hybrid App上加载远程网页(最简单的方法)？

javascript - 如果父事件已经运行超过一段时间，如何运行函数

html - css 边距左右问题

javascript - 如何删除在 stringify 函数中创建的 ""反转？