Javascript 如何删除由多个子元素组成的主父元素？

HTML-

来源


来源


来源


来源

JAVASCRIPT-

    <div class="windows" id="window'+divCount+'"> 
<p id="windowName'+divCount+'"></p> 
<p id="para'+divCount+'">Source</p> 
</div> 
<div class="windows" id="window'+divCount+'"> 
<p id="windowName'+divCount+'"></p> 
<p id="para'+divCount+'">Source</p> 
</div> 
<div class="windows" id="window'+divCount+'"> 
<p id="windowName'+divCount+'"></p> 
<p id="para'+divCount+'">Source</p> 
</div> 
<div class="windows" id="window'+divCount+'"> 
<p id="windowName'+divCount+'"></p> 
<p id="para'+divCount+'">Source</p> 
</div>

 

$.contextMenu({
选择器：“.windows”，
selectableSubMenu:true，
回调：函数（键、选项）{
var m=“单击：”+键；
window.console&&console.log（m）| | alert（m）；
},
项目：{
“删除”：{
名称：“删除”，
回调：函数（）{
$（“此窗口将被永久删除且无法恢复。是否确定？
”）。对话框({
可调整大小：false，
高度：“自动”，
宽度：400，
莫代尔：是的，
按钮：{
取消：函数（）{
$（此）.dialog（“关闭”）；
},
“删除”：函数（）{
$（this.parentNode）.remove（）；
},
}
});
}
},
“sep1”：“-----------”，
“某人”：{
名称：“发回”，
回调：函数（）{
var-index=$（this.css（“z-index”）；
如果（索引！=50）{
索引=parseInt（索引）-50；
$（this.css（“z-index”，index）；
}否则{
$（this.css（“z-index”，“50”）；
}
}
},
“SF”：{
姓名：“请到前面来”，
回调：函数（）{
var-index=$（this.css（“z-index”）；
索引=parseInt（索引）+50；
$（this.css（“z-index”，index）；
}
},
“杜”：{
名称：“重复”，
回调：函数（）{
$（this.attr（“窗口”+1）；
$（this.clone（）.appendTo（容器）；
}
},
“电子数据交换”：{
名称：“编辑”，
回调：函数（）{
}
}
}
});

在上述代码中，

divcount

是windows创建的计数。我在

div class=“windows”

中使用上下文菜单进行单独更改，在上下文菜单中我使用了jQuery

对话框

小部件，当我在对话框中单击delete时，我只想

删除（）

右键单击的div/窗口，而不是所有窗口，我试过

this.parentElement

，但它删除了上下文菜单而不是Div。。。如何定位并删除右键单击的div

$.contextMenu({
      selector: ".windows",
      selectableSubMenu: true,
      callback: function(key, options) {
        var m = "clicked: " + key;
        window.console && console.log(m) || alert(m);
      },
      items: {
        "delete": {
          name: "Delete",
          callback: function() {
            $('<div style="font-family:Poppins;" title="Delete Window"> <p></span>This window will be permanently deleted and cannot be recovered. Are you sure?</p></div>').dialog({
              resizable: false,
              height: "auto",
              width: 400,
              modal: true,
              buttons: {
                Cancel: function() {
                  $(this).dialog("close");
                },
                "Delete": function() {
                  $(this.parentNode).remove();
                },
              }
            });
    
          }
        },
    
        "sep1": "---------",
    
        "SB": {
          name: "Send Back",
          callback: function() {
            var index = $(this).css("z-index");
            if (index != 50) {
              index = parseInt(index) - 50;
              $(this).css("z-index", index);
            } else {
              $(this).css("z-index", "50");
            }
          }
        },
    
        "SF": {
          name: "Bring Front",
          callback: function() {
            var index = $(this).css("z-index");
            index = parseInt(index) + 50;
            $(this).css("z-index", index);
          }
        },
    
        "Du": {
          name: "Duplicate",
          callback: function() {
            $(this).attr("Window" + 1);
            $(this).clone().appendTo(container);
          }
        },
    
        "Edi": {
          name: "Edit",
          callback: function() {
    
          }
        }
      }
    });