删除父容器div的按钮在动态创建的div上不起作用
问题描述：删除父容器div的按钮在动态创建的div上不起作用。
解决方案： 这个问题通常是由于事件委托的机制导致的。当动态创建的div元素被添加到父容器div中时，父容器div上的事件监听器不会自动应用于动态创建的div元素。为了解决这个问题，可以使用事件委托的方式来处理。
事件委托是指将事件监听器绑定到父容器上，然后通过事件冒泡的机制来触发事件。这样，无论是静态创建的div还是动态创建的div，只要它们是父容器的子元素，都能够触发相应的事件。
具体实现步骤如下：
- 给父容器div添加一个事件监听器，监听需要触发的事件（例如点击事件）。
- 在事件监听器中，判断事件的目标元素是否为动态创建的div。
- 如果是动态创建的div，则执行相应的操作。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>删除父容器div的按钮在动态创建的div上不起作用</title>
</head>
<body>
<div id="parentDiv">
<button id="deleteButton">删除</button>
</div>
<script>
var parentDiv = document.getElementById('parentDiv');
parentDiv.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName.toLowerCase() === 'div') {
// 执行删除操作
target.parentNode.removeChild(target);
}
});
// 动态创建div
var newDiv = document.createElement('div');
newDiv.textContent = '动态创建的div';
parentDiv.appendChild(newDiv);
</script>
</body>
</html>在上述示例中，我们给父容器div添加了一个点击事件监听器。当点击父容器div中的任意一个子元素时，事件会冒泡到父容器div，然后通过判断事件的目标元素是否为动态创建的div来执行相应的操作。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
腾讯云云服务器（CVM）是一种弹性计算服务，提供安全可靠、弹性扩展的云端计算能力。您可以根据业务需求选择不同配置的云服务器实例，快速构建和部署应用程序。
产品介绍链接地址：腾讯云云服务器（CVM）
相关·内容
1回答
删除父容器div的按钮在动态创建的div上不起作用
javascript、html、parent
我正在尝试从头开始创建一个待办事项javascript应用程序。除了从待办事项列表中删除项目的按钮之外，我已经完成了所有的工作。HTML： <div class="todolistcontainer">constructor(){
div.addEventListener('click', () =&
浏览 15提问于2021-06-20得票数 1
2回答
移动屏幕大小别名链接不起作用，但普通链接工作。
javascript、python、html、css、django
ROBLEM:在移动屏幕大小的别名链接不起作用，但正常链接指向任何其他网页前。社交媒体确实有效。描述
I已经用 构建了一个项目(HTML、CSS、JS构建工具)--我已经导出了项目，将其放到了django项目中--我在屏幕中间添加了几个额外的按钮，这些按钮是作为别名在登陆页面上合并的。ERORR:这个导出的项目在桌面屏幕大小或平板屏幕大小(这两种情况下，最初的构建器都会重组组件)中
浏览 5提问于2020-03-11得票数 0
回答已采纳
2回答
单选按钮的标签在使用jquery模式弹出窗口创建的弹出窗口中不起作用
jquery、html
我有一个隐藏的div包含单选按钮，其中有标签的标签。这在页面上工作得很好(我通过从div中删除隐藏属性进行了测试)，但当我在使用jquery创建的模式弹出窗口上拉出div内容时，我的标签在弹出窗口上不起作用。似乎当我在我的模式窗口中点击标签时，它会在父页面上点击相应的单选按钮
浏览 0提问于2012-12-02得票数 1
回答已采纳
1回答
使用jquery将上传文件的文件名输入动态创建的文本框中。
jquery、html、file-upload
我有一个使用(html/jquery)的多个图像上传函数，我将文件名放到每个上传按钮旁边的文本框中。演示：在这种情况下，我使用的代码与上面的代码相同，但在change函数上不起作用。<em
浏览 2提问于2014-08-16得票数 0
回答已采纳
4回答
浮动的内部<div>从周围的<div>流出
html、css-float
请帮助我理解为什么以下代码的image-div会流出box-div。<body> <div id="image" style="height:200px; width: 200px; background: red; float: left;"></
浏览 0提问于2011-01-17得票数 2
回答已采纳
1回答
获取动态创建的div的id
javascript、html、jquery
我想隐藏并显示动态创建的div。我通过按按钮类别来创建div。<button id="Category">Add category</button>
浏览 1提问于2021-05-18得票数 3
回答已采纳
1回答
我可以选择一个动态添加的p元素及其子按钮吗？
jquery、html
我有以下动态添加的p元素。包围的div位于DOM中。我想用按钮移除p。="button">REMOVE</button></div>
这里有很多关于如何使用.on方法向动态添加的元素添加单击函数的引用(前面的问题)(如我的示例中的按钮)。但不知道如何让函数对父元
浏览 4提问于2015-08-20得票数 3
回答已采纳
2回答
我有这个 { transform : scale(0.3); }transform : scale(30%);transform: scale(calc(30%));
但是，很明显，这是行不通的
浏览 1提问于2019-01-04得票数 1
回答已采纳
5回答
remove()仅作用于第一个div，而不作用于rest动态添加的字段
javascript、jquery
我正在尝试删除HTML字段，但删除在动态添加的字段上不起作用。alert('hello'); return false;
尝试添加div并删除
浏览 0提问于2016-05-19得票数 1
2回答
我对es6类和事件侦听器有问题吗？
javascript、html
不是ES6或事件侦听器的问题，而是innerHTML是如何工作的。它正在删除所有html (破坏侦听器)，然后将html添加回仅附加了最新侦听器的html。或者这很可能是我对整件事的理解。
我正在动态地创建一个名为“Thing”的类的5个实例。每个“东西”都会将一段HTML写入DOM，其中包含一个按钮，并添加一个事件侦听器来处理单击。元素正在使用document.querySelector进行选择，并基于一个名为“i
浏览 5提问于2016-10-04得票数 0
回答已采纳
2回答
HTML/Jquery删除了由下面的div占据的div的位置。怎么做？
javascript、jquery、html、css、plugins
每个页面都有同一个类的父div。用户可以从一个页面水平滚动到另一个页面。此外，用户还可以动态地将子div添加到父容器中。每个孩子都有一个移除按钮。单击此按钮后，相应的子节点将被移除。我的问题是：
如何使第2页父容器中的子div(s)同时占据第1页中已删除div的空位置和从
浏览 1提问于2014-06-12得票数 0
回答已采纳
4回答
延伸到父容器的子容器的CSS背景颜色
html、css
子容器需要背景颜色，直到视点的宽度。所需的属性应仅应用于子容器。背景颜色应仅应用于文本区域。 width: 200px; border: 1px solid green;<divclass=&quo
浏览 0提问于2015-08-07得票数 2
2回答
我是否可以在下面的图片上创建一个布局，同时只在父容器上设置固定的宽度？我也不能在全屏幕宽度子上使用position: absolute; left: 0; right: 0;，因为我不能从流中删除它，因为它的大小是动态的。
我不能改变标记。我能想到的唯一解决方案是分别为每个固定宽度的子容器设置固定宽度，但是由于我有很多这样的解决方案，这不是最舒服的</em
浏览 0提问于2017-07-04得票数 1
回答已采纳
1回答
如何根据内容动态设置父div的高度？
css、sass
我有一个灰色的父div容器，我在里面创建了一个可扩展的文本输入框，如下所示： 如果展开输入框，我想动态设置父div(灰色的那个)的高度。然而，它只是隐藏在灰色的div容器下面。请参阅所附图片 我曾尝试为父目录设置overflow:auto, max-height属性，但似乎都不起作用。这是我的
浏览 18提问于2020-09-30得票数 0
2回答
如何将div高度设置为与子div的高度匹配？
javascript、jquery、html、height
我创建了一个div容器，里面有一些子div。该子对象通过img标记以百分比宽度显示图片。
当我检查父div的高度时，我的浏览器显示它是0px的，即使子div中的图片具有非零的高度。当我只使用宽度百分比时，如何将父div自动设置为最大子代的高度？当我在浏览器中手动调整图像大小时，这也必须起作用。
浏览 0提问于2015-05-04得票数 0
2回答
如何使一组内联div在另一个div中居中
css、html
从本质上讲，正如标题所说的，我试图将数字放在中心位置。这张图片取自
我还有一个问题，那就是将facebook嵌入的div like按钮居中。这与将一个div放在另一个div中的问题类似。我能够通过在父div上执行style="text-align: center“将其放到中心，但在第一个问题上不起作用(所以我发布了两个问题)。我很确定这与正确设置父<em
浏览 0提问于2012-02-12得票数 2
回答已采纳
3回答
jquery移除在动态创建的div上不起作用的父级
jquery、html、dynamic
我正在尝试使用jquery来让按钮移除其父div。>$('.button_remove_web_store').click(function() {});
这适用于页面加载时html中的div，但不适用于用户动态创建的div (使用以下jqu
浏览 0提问于2010-01-24得票数 10
回答已采纳
1回答
基于动态宽度父容器的比例宽度设置
javascript、css、angular-ui-bootstrap
我有一个div，它具有动态宽度(使用百分比大小)。在这个里面我有两个按钮，这里有一个问题，我必须使这两个按钮具有相同的容器长度。到目前为止，我已经成功地使第一个按钮具有动态宽度，但是这两个按钮并没有覆盖容器的所有内容。您可以看到，在小提琴，css类：“btn-拉伸”，这个类占85%的父容器。因此，这
浏览 4提问于2015-04-06得票数 0
回答已采纳
3回答
在动态调整大小的元素中具有100%高度的div
html、css
为了描述我的项目-我有一个div元素，如果添加了更多的内容，它的大小就会增长-父div的大小也会像它应该的那样增长。
然后我有两个div元素，一个在左边，另一个在右边。我将高度设置为100%，但这不起作用。我怎么才能实现这样的行为呢？
浏览 0提问于2011-05-07得票数 2
回答已采纳
1回答
如何从另一个窗口打开Kendo窗口？
jquery、kendo-ui、kendo-window
我的要求是，如果我单击这个窗口上的一个按钮，它应该动态地创建一个iframe并附加到一个div，并将这个新div附加到父容器中，并显示为一个新窗口，就像我从菜单中打开它一样。我可以成功地将iframe和div添加到父容器，但是当我打开窗口时，它会在我所在的窗口内打开，而不是从父容器中打开。我的代码如下：
$("#b
浏览 2提问于2014-09-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
