¿Cómo eliminar el elemento principal que consiste en múltiples elementos infantiles?

HTML -

    
 

 

Source
 

 

 

 

Source
 

 

 

 

Source
 

 

 

 

Source

JAVASCRIPT -

$.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() {
            $('
 
This window will be permanently deleted and cannot be recovered. Are you sure?
').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() {
    
          }
        }
      }
    });

En el código anterior, divcount son las ventanas creadas cuentan. Estoy usando menús contextuales para cambios individuales necesita en el div class="windows", dentro del menú contextual he utilizado jQuery Dialog widgets, cuando haga clic en eliminar en el cuadro de diálogo, quiero remove() sólo la div/ventana que fue el clic derecho y no todos ellos, ive probó this.parentElement pero eso elimina el menú contextual y no el Div... ¿cómo dirijo y eliminar el div clic derecho?

Pregunta hecha hace 3 años, 4 meses, 13 días - Por codexcrafter

2 Respuestas:

  • Para eliminar el div específico al que se le dio clic derecho, puedes hacer lo siguiente en la función callback del botón "Delete":

    javascript
callback: function() {
    var $windowToDelete = $(this).closest('.windows');

    $('
     
    This window will be permanently deleted and cannot be recovered. Are you sure?
    ').dialog({
        resizable: false,
        height: "auto",
        width: 400,
        modal: true,
        buttons: {
            Cancel: function() {
                $(this).dialog("close");
            },
            "Delete": function() {
                $windowToDelete.remove();
                $(this).dialog("close");
            }
        }
    });

}

    En este código, $(this).closest('.windows') busca el elemento ancestro más cercano con clase "windows", que es el div que deseas eliminar. Luego, al hacer clic en "Delete", solo se elimina ese div específico. Además, se ha agregado $(this).dialog("close"); para cerrar el cuadro de diálogo después de eliminar el div.

    Respondida el Dec 18, 2020 a las 11:25 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para eliminar solo el elemento div en el que se hizo clic con el botón derecho, puedes usar $(this) dentro del controlador callback del elemento del menú contextual "Eliminar". Aquí tienes el código actualizado:

    javascript "delete": { name: "Delete", callback: function() { $('<div style="font-family:Poppins;" title="Delete Window"> <p>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).parent().remove(); // Elimina el elemento `div` en el que se hizo clic con el botón derecho }, } }); } },

    Respondida el Dec 18, 2020 a las 11:39 - por Gemini

    Votos positivos: 0 | Votos negativos: 0