javascript - removeAttr() 和 remove() 不起作用

Question

我想使用 removeAttr()和 remove()删除 <div> ，但似乎不起作用。因为我有 $('#div1').removeAttr('style').remove();在javascript的最后一行，不应该是<div>吗？只出现一瞬间？我不确定javascript是事件驱动编程还是自顶向下编程？或者取决于代码。

我想这样做是因为我想删除并清除 <div>每次我拖一个新的<div>之前，我尝试将那行代码放在各处，但它不起作用。

我不是计算机专业的，请原谅我的无知。但是我不明白为什么最后一行不执行？ 如果您能提供帮助，我将不胜感激。非常感谢。

我的代码:

$(document).ready(function() {
  var dragging = false;
  var clickedX, clickedY;

  // right click event
  $("#displayWindow").mousedown(function(e) {
    // when the mouse is pressed, the div is appended to the displayWindow
    if (e.button == 2) {
      // append the div start at the location that we click
      $("#displayWindow").append("<div id='div1'></div>");
      // get the coordinate where we clicked and set the div begin with that position
      clickedX = e.pageX;
      clickedY = e.pageY;
      $('#div1').css({
        top: clickedY,
        left: clickedX
      });
      dragging = true;
      return false;
    }
  });

  // holding on the mouse button, change the size of the div
  $("#displayWindow").on("mousemove", function(e) {
    if (dragging) {
      var mouseOnX = e.pageX;
      var mouseOnY = e.pageY;
      // allow user drag the selection box in 4 different direction
      $('#div1').css({
        top: Math.min(clickedY, mouseOnY),
        left: Math.min(clickedX, mouseOnX),
        height: Math.abs(mouseOnY - clickedY),
        width: Math.abs(mouseOnX - clickedX)
      });
    }
  }); // end on

  $(document).on("mouseup", function(e) {
    dragging = false;
  });

  // when clicked again, the menu fade out, and the div disappear
  $(document).click(function(e) {
    if (e.button == 0) {
      // remove the selection box div
      $('#div1').remove();
    }
  });

  // prevent the default contextmenu on the display window
  document.getElementById('displayWindow').oncontextmenu = function() {
    return false;
  };
}); // end ready

	#displayWindow {
	  background-color: white;
	  border: 1px solid;
	  height: 600px;
	  width: 800px;
	}
	#div1 {
	  background-color: lightgreen;
	  position: absolute;
	  opacity: 0.3;
	}
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="displayWindow">
  <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content">
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text>
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue">
  </svg>
</div>

Answer 1

您遇到的问题与删除无关。问题是:

• 您将事件处理程序添加到 mousemove 事件，每次 右键单击​​。这个不对。您只需绑定(bind)一次 mousemove 处理程序，因此将该代码移到 mousemove 事件处理程序之外。因此，还在 ready 函数级别声明 clickedX 和 clickedY 变量；
• mousemove 事件不提供有关按钮被按下的信息，因此 e.button 将始终为 0。相反，您应该跟踪是否使用变量按下了鼠标按钮，并在检测到文档上的 mouseup 事件时重置该变量。这并不完美，但可能已经足够好了；

一些其他注意事项:

• 您添加的div 没有style 属性，因此执行removeAttr('style') 没有任何效果。但是，remove() 有效；
• 您可以在一次 css() 调用中更改多个 css 样式，方法是传递一个包含键/值对的对象。
• 从事件处理程序返回 true 是没有用的。
• 虽然您在评论中提到用户可以在所有 4 个方向上拖动，但您只允许框在一个象限内移动。您可以结合使用 Math.min 和 Math.abs 调用来支持 4 个方向。

这里是一些改编的代码:

$(document).ready(function() {
    var dragging = false;
    var clickedX, clickedY;
    // right click event
    $("#displayWindow").mousedown(function(e) {
        // when the mouse is pressed, the div is appended to the displayWindow
        if (e.button == 2) {
            $('#div1').remove(); // remove div that might still be there.
            // append the div start at the location that we click
            $("#displayWindow").append("<div id='div1'></div>");
            // get the coordinate where we clicked and set the div begin with that position
            clickedX = e.pageX;
            clickedY = e.pageY;
            $('#div1').css({top: clickedY, left: clickedX});
            dragging = true;
            return false;
        }
    });

    // holding on the mouse button, change the size of the div
    $("#displayWindow").on("mousemove", function(e) {
        if (dragging) {
            var mouseOnX = e.pageX;
            var mouseOnY = e.pageY;
            // allow user to drag the selection box in 4 different directions
            $('#div1').css({
                top: Math.min(clickedY, mouseOnY), 
                left: Math.min(clickedX, mouseOnX),
                height: Math.abs(mouseOnY - clickedY), 
                width: Math.abs(mouseOnX - clickedX)
            });
        }
    }); 

    $(document).on("mouseup", function(e) {
        dragging = false;
    });
    
    // when clicked the div disappears
    $(document).click(function(e) {
        if (e.button == 0) {
            // remove the selection box div
            $('#div1').remove();
        }
    });

    // prevent the default contextmenu on the display window
    document.getElementById('displayWindow').oncontextmenu = function() {
        return false;
    };

    $('#div1').remove();
}); // end ready

	#displayWindow {
	  background-color: white;
	  border: 1px solid;
	  height: 600px;
	  width: 800px;
	}
	#div1 {
	  background-color: lightgreen;
	  position: absolute;
	  opacity: 0.3;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displayWindow">
  <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content">
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text>
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue">
  </svg>
</div>