首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

删除父容器div的按钮在动态创建的div上不起作用

问题描述:删除父容器div的按钮在动态创建的div上不起作用。

解决方案: 这个问题通常是由于事件委托的机制导致的。当动态创建的div元素被添加到父容器div中时,父容器div上的事件监听器不会自动应用于动态创建的div元素。为了解决这个问题,可以使用事件委托的方式来处理。

事件委托是指将事件监听器绑定到父容器上,然后通过事件冒泡的机制来触发事件。这样,无论是静态创建的div还是动态创建的div,只要它们是父容器的子元素,都能够触发相应的事件。

具体实现步骤如下:

  1. 给父容器div添加一个事件监听器,监听需要触发的事件(例如点击事件)。
  2. 在事件监听器中,判断事件的目标元素是否为动态创建的div。
  3. 如果是动态创建的div,则执行相应的操作。

以下是一个示例代码:

代码语言:txt
复制
<!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)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js 实现上下改变 div 高度,左右上下动态分割孩子宽高

需求 实现 div 里面 左右,上下动态分割 div,并上下改变 div 高度,并且宽和高都是按百分比(如图) 。 ? 2....上下拖动 arrow,当上拖动时,arrow div 高度变小,当下拖动时,arrow div 高度变大。...拖动改变左右 label 时,向左时,label div 宽变小,label div 相邻 右边 div 宽度变大。...拖动改变上下 label 时,向上时,label div 高度变小,label div 相邻下边 div 高度变大。...不过网上并不完整, div 高也不能改变,并且孩子宽高并不是百分比,布局也并不合理,所以修改成这样子。

10K30

react 基础操作-语法、特性 、路由配置

最后,我们 JSX 中展示了计数器值,每次点击按钮时计数器会自动增加并重新渲染。 通过使用状态管理,函数组件中更新值并触发重新渲染,可以实现页面内容动态更新。...同时,元素 上点击事件处理函数也会被触发。...需要注意是, React 中,event.stopPropagation() 方法并不会阻止事件组件内部其他事件处理函数中继续执行,只会阻止事件冒泡到元素上。...在上面的示例中,我们使用 useState 创建了一个名为 count 状态变量,并使用 setCount 函数来更新它。点击 "Increment" 按钮时,count 值会增加。...useEffect - 用于组件加载后执行副作用操作。

20820

VUE2全家桶精讲

,给组件发送消息通知 组件监听$emit触发事件 提供处理函数,函数性参中获取传过来参数 四十三、什么是props 1.Props 定义 组件上 注册一些 自定义属性 2.Props 作用...当点击按钮时,通过 $emit 方法触发一个自定义事件,通知组件进行相应操作 接下来,组件中,需要绑定子组件 count 属性,并监听子组件自定义事件,执行相应操作: App.vue <template...) 5、删除功能 思路分析: 监听时间(监听删除点击)携带id 子传,将删除id传递给组件App.vue 进行删除 filter (自己数据自己负责) 6.底部功能及持久化存储 思路分析: 底部合计...当用户输入框内敲击回车或者点击添加按钮时,会触发 addTodo 方法,并将 newTodoItem 值传递给组件。...当用户点击删除按钮时,会触发 deleteTodoItem 方法,并将对应任务 id 传递给组件。

24510

jQuery 事件注册、事件处理

on() 方法优势3: 动态创建元素,click() 没有办法绑定事件, on() 可以给动态生成元素绑定事件 $(“div").on("click",”p”, function(){...alert("俺可以给动态生成元素绑定事件") }); $("div").append($("我是动态创建p")); 演示代码 </...案例:发布微博案例 1.点击发布按钮动态创建一个小li,放入文本框内容和删除按钮, 并且添加到ul 中。2.点击删除按钮,可以删除当前微博留言。 ​...代码实现 $(function () { // 1.点击发布按钮动态创建一个小li,放入文本框内容和删除按钮, 并且添加到ul 中 $...}); // 2.点击删除按钮,可以删除当前微博留言li // 原来方法 此时click不能给动态创建a标签添加事件 因为上面添加a还没有触发

3.8K20

vuejs中组件以及父子组件间通信传值

,属性绑定,事件方法监听绑定,条件渲染v-if,动态绑定class: 其中el:实例选项,值类型是字符串或者实际html元素对象,边界管理,挂载点,确定vue作用域范围 data:实例选项,数据,...而通过全局注册(Vue.component(tagName, options))或者局部注册组件是子组件,根实例作用域范围内,实例模块中以自定义元素 调用子组件进行使用,要注意是确保初始化根实例之前...既然子组件渲染结果是由组件决定,想要删除子组件,就必须要更改组件数据,所以删除子组件时候,我们需要点击该子组件,子组件需要把对应内容传给组件,让组件去改变数据,让组件数据改变了...,通过emit方法向外触发事件方式,当点击子组件时候,该子组件绑定点击click事件方法,该子组件methods方法内,通过emit向外触发一个自定义事件 组件创建子组件同时可以去监听组件...@deletelist="deleteItemFun",组件这个模板当中,创建子组件同时也监听了子组件deletelist这个事件,一旦删除事件deleteitemFun被触发时候就会执行组件实例下挂载

20.4K10

一步一步学Vue(四)

,把AB组件重构成只用来渲染数据pure组件,数据由外部传入,而vue正好提供了这种props传子机制,把Ajax操作定义到组件中(就是我们这里提到容器组件),也起到了重复代码提取作用,基于此请看我们第二版代码...已经明白了容器组件作用,那么我们来实现一下前几篇中todolist容器组件吧,上篇已有基本结果,这里先出代码后解释: /** * 容器组件 * 说明:容器组件包括三个字组件..._mock_save(this.items); }, /** * 删除方法 * 响应删除按钮操作...$emit('onremove', $e); } } } 这两个数据渲染组件就没什么好说名了;但是大家发现一个很不爽问题:由于我们容器中统一管理了业务逻辑..._mock_save(this.items); }, /** * 删除方法 * 响应删除按钮操作

1.2K10

Web如何适配无障碍?

上方这个div被选中时,屏幕阅读器会播报「HullQin自我介绍」,而不会播报「你好,我是HullQin」。role="button"role="button",将元素标记为按钮,。...隐藏无意义元素如果是无用元素(如不影响业务流程logo、图片),最内层Dom结点设置aria-hidden="true",或在一组无用元素容器结点设置aria-hidden="true"。...维护成本高(若子结点需要动态改变,结点aria-label也需要随之改变) 【推荐】结点设置aria-labelledby,值为所有子结点id(用空格拼接)...option表明这是个select下拉框选项,读屏软件会错误理解该控件作用,部分安卓机会播报“单指双击即可执行”。...结点动态变更例如按钮状态可能会在js中变为disabled,注意最好直接用原生disabled属性,否则,你还需要手动设置aria-disabled为true。

3.5K63

基于 HTML5 Canvas 工控机柜 U 位动态管理

getView() 返回底层 div 元素添加到页面的 DOM 元素中,这里需要注意是,当容器大小变化时,如果容器是 BorderPane 和 SplitView 等这些HT预定义容器组件,则...但如果容器是原生 html 元素, 则 HT 组件无法获知需要更新,因此最外层 HT 组件一般需要监听 window 窗口大小变化事件,调用最外层组件 invalidate 函数进行更新。...,作用创建一个 dialog 对话框(http://www.hightopo.com/guide/guide/plugin/dialog/ht-dialog-guide.html),我们设置此对话框中内容为一个...form 表单进行显示,同时还设计了两个按钮,“OK”按钮作为执行创建/更改机柜属性,“Cancel”按钮不执行其他操作,只是将对话框隐藏: ?...实现了添加和编辑机柜两个功能,删除机柜功能实现上非常容易,只要将节点从拓扑图和树上移除即可: handleRemoveRack: function(){// 拓扑图上删除机柜,并删除树上此机柜对应节点

2.3K40

前端成神之路-vue03

-- 2、 需要动态数据时候 需要属性绑定形式设置 此时 ptitle 来自组件data 中数据 ....实现列表组件删除功能 从父组件把商品列表list 数据传递过来 即 向子组件传值 把传递过来数据渲染到页面上 点击删除按钮时候删除对应数据 给按钮添加点击事件把需要删除id传递过来...子组件中不推荐操作组件数据有可能多个子组件使用组件数据 我们需要把数据传递给组件让组件操作数据 组件删除对应数据 + # 3.3 给按钮添加点击事件把需要删除id传递过来 <div class="del" @click...实现组件更新数据功能 上 将输入框中默认数据动态渲染出来 输入框失去焦点时候 更改商品数量 子组件中不推荐操作数据 把这些数据传递给组件 让组件处理这些数据 组件中接收子组件传递过来数据并处理

5.9K20

前端三大框架之Vue-day03

-- 2、 需要动态数据时候 需要属性绑定形式设置 此时 ptitle 来自组件data 中数据 ....实现列表组件删除功能 从父组件把商品列表list 数据传递过来 即 向子组件传值 把传递过来数据渲染到页面上 点击删除按钮时候删除对应数据 给按钮添加点击事件把需要删除id传递过来...子组件中不推荐操作组件数据有可能多个子组件使用组件数据 我们需要把数据传递给组件让组件操作数据 组件删除对应数据 + # 3.3 给按钮添加点击事件把需要删除id传递过来 <div class="del" @click...实现组件更新数据功能 上 将输入框中默认数据动态渲染出来 输入框失去焦点时候 更改商品数量 子组件中不推荐操作数据 把这些数据传递给组件 让组件处理这些数据 组件中接收子组件传递过来数据并处理

5.6K30

重学巩固你Vuejs知识体系(上)

变量作用域:变量什么范围内是可用。...Vue实例作用范围内使用组件 组件示例: <script src=".....通常在<em>创建</em>组件构造器时,传入template代表我们自定义组件<em>的</em>模板。 该模板<em>在</em>使用到组件<em>的</em>地方,显示<em>的</em>html代码。 这种写法<em>在</em>Vue2.x<em>的</em>文档几乎看不到了。...>我是子组件<em>的</em>内容 ` }) // <em>创建</em>一个<em>父</em>组件<em>的</em>构造器 const parentComponent = Vue.extend({ template: ` ...app = new Vue({ el: '#app' }) 编译<em>作用</em>域 Vue实例属性: <em>父</em>组件模板<em>的</em>所有东西都会在<em>父</em>级<em>作用</em>域内编译,子组件模板<em>的</em>所有东西都会在子级<em>作用</em>域内编译

5K10

巧用浮动布局、解决高度塌陷实例分享|技术创作特训营第一期

面包屑导航和按钮一行两端显示面包屑或编辑栏超出宽度则自动另行显示图片实现采用浮动,绿色块左浮,蓝色块右浮,利用浮动特性实现宽度超出另一行显示效果,并是动态。...浮动可以让一个元素脱离标准流,向左或向右移动并占据其父元素剩余空间。浮动元素不会影响其他元素布局,但是它们会创建一个新块级框,可以设置宽度和高度。...高度塌陷当然,子元素都浮动以后,会脱离出div外,导致超出元素(元素高度塌陷)。**怎么解决呢?**图片给div加overflow: hidden清除浮动。...overflow: hidden 是一个 CSS 属性,用于控制元素内容是否超出其容器边界。它可以清除浮动,但前提是浮动发生在该元素内部。...当一个元素包含浮动时,如果不使用 clearfix 方法或其他技术来清除浮动,可能会导致元素高度塌陷。为了解决这个问题,可以元素上设置 overflow: hidden,这样就可以清除浮动了。

21011

第四篇:组件更新:完整 DOM diff 流程是怎样?(上)

组件渲染过程中创建了一个带副作用渲染函数,当数据变化时候就会执行这个渲染函数来触发组件更新。那么接下来,我们就具体分析一下组件更新过程。 1. ...类型,如果不同,比如一个 div 更新成一个 ul,那么最简单操作就是删除 div 节点,再去挂载新 ul 节点。...如果新子节点是 vnode 数组,那么先把旧子节点文本清空,再去旧子节点容器下添加多个新子节点; 旧子节点是空情况: 1....如果新子节点是纯文本,那么旧子节点容器下添加新文本节点即可; 2. 如果新子节点也是空,那么什么都不需要做; 3....如果新子节点是纯文本,那么先删除旧子节点,再去旧子节点容器下添加新文本节点; 2. 如果新子节点是空,那么删除旧子节点即可; 3.

25241

如何在已有的 Web 应用中使用 ReactJS

菜单和日历不同容器中,但是它们状态是共享。 我将用 jQuery 和 ReactJS 做 4 个例子解释共享/独立状态概念。...下面的代码是一个典型 jQuery 应用,我们选择级元素 .mood-container ,然后动态改变内容。 以下是例子 HTML: <!...在这个例子中,我们通过 .Mood__name 和 .Mood__button-name 选择器分享 mood name ,并且通过一个容器按钮去更新另一个容器 emoji 。...因为我们希望组件之间通信,所以我们将它们放置级组件中,然后向下传递属性来更新每个子组件。这是 ReactJS 最基本工作方式。 这种方式适用于多个 UI 组件被一个组件包裹情况。...很多之前创建应用可能不适合,但是可以根据 UI 布局情况选择使用。

14.5K00

如何在现有的 Web 应用中使用 ReactJS

菜单和日历不同容器中,但是它们状态是共享。 我将用 jQuery 和 ReactJS 做 4 个例子解释共享/独立状态概念。...下面的代码是一个典型 jQuery 应用,我们选择级元素 .mood-container ,然后动态改变内容。 以下是例子 HTML: <!...在这个例子中,我们通过 .Mood__name 和 .Mood__button-name 选择器分享 mood name ,并且通过一个容器按钮去更新另一个容器 emoji 。...因为我们希望组件之间通信,所以我们将它们放置级组件中,然后向下传递属性来更新每个子组件。这是 ReactJS 最基本工作方式。 这种方式适用于多个 UI 组件被一个组件包裹情况。...很多之前创建应用可能不适合,但是可以根据 UI 布局情况选择使用。

7.7K40
领券