JavaScript删除元素、移除、remove、removeChild、querySelector-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript删除元素、移除、remove、removeChild、querySelector。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

删除元素本身

方法1.1

event.target.remove();

方法1.2

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

方法2.1

idDeleteSelf.remove();

方法2.2

idDeleteSelf.parentNode.removeChild(idDeleteSelf);

删除子元素

idParent.removeChild(idChild);
记得给子元素做冒泡处理

删除父元素

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

Element.remove方法，把对象从它所属的DOM树中删除。

w3school

remove方法从文档中删除元素(或节点)。
元素或节点是从文档对象模型(DOM)中删除的。

removeChild

w3school

removeChild方法删除元素的子节点。
该方法以Node对象返回被删除的节点；如果节点不存在，则返回null。
子节点从是文档对象模型(DOM)中删除的。但是，可以修改返回的节点并将其插回DOM。

MDN

Node.removeChild方法从DOM中删除一个子节点。返回删除的节点。

querySelector

MDN

文档对象模型Document引用的querySelector方法返回文档中与指定选择器或选择器组匹配的第一个Element对象。如果找不到匹配项，则返回null。

w3school

querySelector方法返回与CSS选择器匹配的第一个元素。
如需返回所有匹配项(不仅是第一个匹配项)，请改用querySelectorAll。
如果选择器无效，则querySelector和querySelectorAll都会抛出SYNTAX_ERR异常。文章来源地址https://www.toymoban.com/news/detail-507109.html

到了这里，关于JavaScript删除元素、移除、remove、removeChild、querySelector的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！