为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 JavaScript 中的一个函数从多个函数中删除一个特定的 div?

如何使用 JavaScript 中的一个函数从多个函数中删除一个特定的 div?

慕仙森 2022-09-29 15:34:59
我正在学习 JavaScript,这对我来说是一个练习场景。我已经有一个克隆内容的按钮,在克隆的内容中,有一个按钮可以删除它。当我单击提示您删除内容的按钮时,它会删除第一组内容。我希望发生的事情是,当您单击提示您删除内容的按钮时,它会删除与该按钮相关的内容,而不会删除其他任何内容。这是代码围栏链接。https://codepen.io/JosephChunta/pen/YzwwgvQ这是代码。function addContent() {  var itm = document.getElementById("newContent");  var cln = itm.cloneNode(true);  document.getElementById("placeToStoreContent").appendChild(cln);}function removeContent() {  var x = document.getElementById("content").parentNode.remove();}// This is for debug purposes to see which content is whichdocument.getElementById('orderContent')  .addEventListener('click', function(e) {    const orderedNumber = document.querySelectorAll('.thisIsContent');    let i = 1;    for (p of orderedNumber) {      p.innerText = '' + (i++);    }  });.contentThatShouldBeHidden {  display: none;}<div id="placeToStoreContent"></div><button id="orderContent" onclick="addContent()">Add Content</button><div class="contentThatShouldBeHidden">  <div id="newContent">    <div id="content">      <p class="thisIsContent">This is a prompt</p>      <button onclick="removeContent()">Remove this</button>      <hr />    </div>  </div></div>
查看完整描述

2 回答

?
吃鸡游戏

TA贡献1829条经验 获得超7个赞

当您尝试按 ID 删除时,它会获取找到的第一个 ID。


要删除正确的内容,请发送点击。this


  <button onclick="removeContent(this)">Remove this</button>

并在您的函数中处理它:


function removeContent(el) {

  el.parentNode.remove();

}

例:


function addContent() {

  var itm = document.getElementById("newContent");

  var cln = itm.cloneNode(true);

  document.getElementById("placeToStoreContent").appendChild(cln);

}


function removeContent(el) {

  el.parentNode.remove();

}


// This is for debug purposes to see which content is which

document.getElementById('orderContent')

        .addEventListener('click', function(e) {

            const orderedNumber = document.querySelectorAll('.thisIsContent');

            let i = 1;

            for (p of orderedNumber) {

                p.innerText = '' + (i++);

            }

        });

.contentThatShouldBeHidden { display: none; }

<div id="placeToStoreContent">

  

</div>


<button id="orderContent" onclick="addContent()">Add Content</button>


<div class="contentThatShouldBeHidden">

  <div id="newContent">

    <div id="content">

      <p class="thisIsContent">This is a prompt</p>

      <button onclick="removeContent(this)">Remove this</button>

      <hr />

    </div>

  </div>

</div>


查看完整回答
反对 回复 2022-09-29
?
手掌心

TA贡献1942条经验 获得超3个赞

在移除按钮中,执行以下操作:

<!-- The "this" keyword is a reference to the button element itself -->
<button onclick="removeContent(this)">Remove this</button>

在你的脚本中:

function removeContent(element) {
  element.parentNode.remove();
}


查看完整回答
反对 回复 2022-09-29
  • 2 回答
  • 0 关注
  • 87 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信