javascript-按下内部按钮时从div中删除元素

我有一个

div

，看起来像这样：

<div id="contact-segments">
    <div class="contact-segment-item doesnt-include">
        <div class="segment-content pull-left" style="width: 80%">
            <p>LOL</p>
        </div>
        <div class="pull-right">
            <a href="your link here">
                <i class="white-segment-icon fa fa-times"></i>
            </a>
        </div>
    </div>
</div>

如您所见，通过JavaScript添加的div有一个

a

标记，显示一个带有“x”的按钮

当按下“x”时，如何删除

联系人段项目

下面是它们的外观，这样更容易描绘

我可以将“x”按钮点击链接到javascript，但我如何知道要删除

联系人段

中的哪个子项，以及如何在删除前获取其

p

当用户按下此

div

上的“x”时，我想得到

p

，或者在本例中是

Woop

这样我就可以用它做点什么，但同时也可以删除

联系人细分项目

---

感谢而不是使用

。innerHTML

我们用

appendChild嵌套节点。

最后，对于关闭

i

按钮，我们添加了

onClick

事件处理程序。我们将

div

节点传递到那里，并使用

remove（）

方法删除节点

编辑：

添加了css

如果您的锚只需要删除您的片段，请不要使用

a

。例如，仅使用

i

而不包装

a

，并向其添加

光标：指针

样式

见工作示例：

函数createUserSegment（标记）{
var div=document.createElement（“div”）；
div.className='联系人段项目包括'；
var tagInfo=document.createElement（“div”）；
tagInfo.className='contact-segment-item____text'；
tagInfo.innerHTML=标记；
var closeButton=document.createElement（“i”）；
closeButton.className='contact-segment-item_uCloseButton白色段图标fa fa times'；
closeButton.onclick=函数（）{
div.remove（）；
};
附件子项（标记信息）；
div.appendChild（关闭按钮）；
document.getElementById（“联系人段”）.appendChild（div）；
}

#触点段{
最大宽度：350px；
宽度：100%；
}
.联络部分项目{
显示：块；
位置：相对位置；
宽度：100%；
背景：#00B792；
边界半径：8px；
线高：40px；
明确：两者皆有；
填充：20px 30px；
边缘底部：10px；
}
.contact-segment-item__锚定：：之后{
明确：两者皆有；
}
.contact-segment-item\uuuu文本{
显示：内联块；
颜色：#fff；
}
.contact-segment-item\uuu关闭按钮{
显示：内联块；
光标：指针；
颜色：#fff；
位置：绝对位置；
最高：50%；
右：20px；
转化：translateY（-50%）；
}

添加新段

而不是使用

.innerHTML

我们用

appendChild嵌套节点。

最后，对于关闭

i

按钮，我们添加了

onClick

事件处理程序。我们将

div

节点传递到那里，并使用

remove（）

方法删除节点

编辑：

添加了css

如果您的锚只需要删除您的片段，请不要使用

a

。例如，仅使用

i

而不包装

a

，并向其添加

光标：指针

样式

见工作示例：

函数createUserSegment（标记）{
var div=document.createElement（“div”）；
div.className='联系人段项目包括'；
var tagInfo=document.createElement（“div”）；
tagInfo.className='contact-segment-item____text'；
tagInfo.innerHTML=标记；
var closeButton=document.createElement（“i”）；
closeButton.className='contact-segment-item_uCloseButton白色段图标fa fa times'；
closeButton.onclick=函数（）{
div.remove（）；
};
附件子项（标记信息）；
div.appendChild（关闭按钮）；
document.getElementById（“联系人段”）.appendChild（div）；
}

#触点段{
最大宽度：350px；
宽度：100%；
}
.联络部分项目{
显示：块；
位置：相对位置；
宽度：100%；
背景：#00B792；
边界半径：8px；
线高：40px；
明确：两者皆有；
填充：20px 30px；
边缘底部：10px；
}
.contact-segment-item__锚定：：之后{
明确：两者皆有；
}
.contact-segment-item\uuuu文本{
显示：内联块；
颜色：#fff；
}
.contact-segment-item\uuu关闭按钮{
显示：内联块；
光标：指针；
颜色：#fff；
位置：绝对位置；
最高：50%；
右：20px；
转化：translateY（-50%）；
}

添加新段

让我想起了几天前的这个问题@E.Sundin，如果我将我的“x”按钮变成一个按钮，并添加一个类似于那篇文章的侦听器，然后按照这些说明操作。。。如何删除按钮周围的2个

div

而不是

div

？另外，在这样做之前，我如何获得

p

？您可以通过访问

parentNode

和

querySelector

在节点树上来回走动。这让我想起了几天前的这个问题@E.Sundin，如果我做了“x”a按钮并添加了一个类似于那篇文章中的侦听器，然后按照这些说明操作。。。如何删除按钮周围的2个

div

而不是

div

？另外，在执行此操作之前，如何获取

p

？您可以通过访问

parentNode

和

querySelector

在节点树上来回走动。这太棒了！哇，太谢谢你了。如何将

p

内部html和关闭按钮并排放置？现在它出现在另一个的顶端。。。我希望它保持我的形象。我真的很感谢你的帮助。另外，在onclick中，我仍然可以访问该实例的

标记吗？我需要将其从数组中删除。您可以将
.className
属性添加到
段落
中，就像
段落.className='内联段落'
那样，然后可以使用css对其进行样式设置<代码>标记

传递给函数的参数将在

onclick

中访问。确保您提到的

array

位于适当的

范围内，例如全局范围。我已更新
function createUserSegment(tags) {
    var div = document.createElement("div");
    div.className = 'contact-segment-item includes'
    div.innerHTML = "<div class='segment-content pull-left' style='width: 80%''> <p>" + tags + "</p> </div> <div class='pull-right'> <a href='your link here'> <i class='white-segment-icon  fa fa-times'></i></a> </div>";
    document.getElementById("contact-segments").appendChild(div);
}