删除元素本身

方法1.1

event.target.remove();

方法1.2

event.target.parentNode.removeChild(event.target);

方法2.1

idDeleteSelf.remove();

方法2.2

idDeleteSelf.parentNode.removeChild(idDeleteSelf);

删除子元素

删除父元素

idChildR.parentNode.parentNode.removeChild(idParentR);

html

<body class="height_100vh d_f jc_c ai_c">
    <div class="width_300 padding_6 bs_bb b_1s_rgba_00_255_07">
        <div id="idDeleteSelf" class="padding_6 cursor_pointer" onclick="deleteSelf(event)">删除元素本身</div>

        <div id="idParent" class="d_f jc_sb ai_c padding_6 cursor_pointer" onclick="deleteChild()">
            删除子元素
            <span id="idChild" class="cursor_text zi7" onclick="stopPropagation(event)">子元素</span>
        </div>

        <div id="idParentR" class="d_f jc_sb ai_c padding_6">
            <span id="idChildR" class="cursor_text cursor_pointer" onclick="deleteParent()">删除父元素</span>
            父元素
        </div>
    </div>
</body>

JavaScript

/**
 * 删除父元素
 */
function deleteParent() {
    let idParentR = document.querySelector('#idParentR'),
        idChildR = document.querySelector('#idChildR');

    if (idParentR && idChildR) idChildR.parentNode.parentNode.removeChild(idParentR);
}

/**
 * 禁止子元素冒泡
 * @param {PointerEvent} event 
 */
function stopPropagation(event) {
    event.stopPropagation();
}

/**
 * 删除子元素
 */
function deleteChild() {
    let idParent = document.querySelector('#idParent'),
        idChild = document.querySelector('#idChild');

    if (idParent && idChild) idParent.removeChild(idChild);
}

/**
 * 删除元素本身
 * @param {PointerEvent} 元素本身
 */
function deleteSelf(event) {
    if (event.target) {
        // 方法1.1
        // event.target.remove();
        // 方法1.2
        event.target.parentNode.removeChild(event.target);
    }

    // let idDeleteSelf = document.querySelector('#idDeleteSelf');
    // if (idDeleteSelf) {
    //     // 方法2.1
    //     // idDeleteSelf.remove();
    //     // 方法2.2
    //     idDeleteSelf.parentNode.removeChild(idDeleteSelf);
    // }
}

remove

MDN

w3school

removeChild

w3school

MDN

querySelector

MDN

w3school

0 条评论