I'm very new to programming and particularly JS and JQuery.
I've searched SO for hours trying to figure out how to do this seemingly simple task and observed plenty of code from talented programmers, but nothing what would suit my request.
I'm simply trying to (A) create a dynamic DIV at the point on the page where the user clicks the mouse. This part I can accomplish.
(B) The next step is clicking on that new DIV and removing it from the page.
Here's what I've found to accomplish step A:
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
});
$(document.body).append(div);
This simply creates a small 40x40px DIV in the body of the document.
Step B is proving beyond my knowledge. Simply being able to click on that newly created DIV and remove it from the document?
If I create the same div manually prior to the page loading, I can click it as expected. I just cant find a way to 'find' the newly created DIV's. Please help. I have researched extensively, and cant seem to find out how to accomplish this.