javascript - removeAttr() and remove() doesn't work -

i want use removeattr() , remove() remove <div>, seems doesn't work. since have $('#div1').removeattr('style').remove(); in last line of javascript, shouldn't <div> appear moment? not sure if javascript event-driven programming or top-down programming? or depends on code.

i want because want delete , clear <div> every time before drag new <div>, , try put line of code everywhere, doesn't work.

i not computer science major, please forgive ignorance. don't understand why last line doesn't execute? if can help, appreciated. thank much.

my code:

$(document).ready(function() {    var dragging = false;    var clickedx, clickedy;      // right click event    $("#displaywindow").mousedown(function(e) {      // when mouse pressed, div appended displaywindow      if (e.button == 2) {        // append div start @ location click        $("#displaywindow").append("<div id='div1'></div>");        // coordinate clicked , set div begin position        clickedx = e.pagex;        clickedy = e.pagey;        $('#div1').css({          top: clickedy,          left: clickedx        });        dragging = true;        return false;      }    });      // holding on mouse button, change size of div    $("#displaywindow").on("mousemove", function(e) {      if (dragging) {        var mouseonx = e.pagex;        var mouseony = e.pagey;        // allow user drag 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, menu fade out, , div disappear    $(document).click(function(e) {      if (e.button == 0) {        // remove selection box div        $('#div1').remove();      }    });      // prevent default contextmenu on 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>

the issue have not removal. issues are:

• you add event handler mousemove event, every time right click. not right. need bind mousemove handler once, move code outside of mousemove event handler. consequence, declare of clickedx , clickedy variables @ ready function level;
• the mousemove event gives no information buttons being pressed, e.button 0 always. instead should keep track of whether mouse button pressed variable, , reset variable when detect mouseup event on document. not perfect, enough;

some other notes:

• the div add has no style attribute, has no effect removeattr('style'). however, remove() works;
• you can change several css styles in 1 css() call, passing object key/value pairs.
• there no use in returning true event handler.
• although mention in comments user can drag in 4 directions, have allowed box move in 1 quadrant. can support 4 directions combination of math.min , math.abs calls.

here adapted code:

$(document).ready(function() {      var dragging = false;      var clickedx, clickedy;      // right click event      $("#displaywindow").mousedown(function(e) {          // when mouse pressed, div appended displaywindow          if (e.button == 2) {              $('#div1').remove(); // remove div might still there.              // append div start @ location click              $("#displaywindow").append("<div id='div1'></div>");              // coordinate clicked , set div begin position              clickedx = e.pagex;              clickedy = e.pagey;              $('#div1').css({top: clickedy, left: clickedx});              dragging = true;              return false;          }      });        // holding on mouse button, change size of div      $("#displaywindow").on("mousemove", function(e) {          if (dragging) {              var mouseonx = e.pagex;              var mouseony = e.pagey;              // allow user drag 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 div disappears      $(document).click(function(e) {          if (e.button == 0) {              // remove selection box div              $('#div1').remove();          }      });        // prevent default contextmenu on 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>