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

Question

I have a div that looks like this:

<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>

Whenever someone presses an add button, I add another contact-segment-item div to the contact-segments div through JavaScript with this function:

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);
}

As you can see, the divs that are getting added through JavaScript have an a tag that shows a button with an "x".

How can I remove the contact-segment-item when the "x" is pressed inside of it?

Here's how each of them look so it's easier to picture.

I can link the "x" button click to javascript but how do I know which child of contact-segments to delete and also how do I get the p of it before it's deleted.

When the user presses the "x" on this div , I want to get the p or in this case Woop! so I can do something with it but then also delete that contact-segment-item

Thanks

Answer 1

Instead of using .innerHTML we nest nodes with appendChild. Finally for our close i button we add onClick event handler. We pass there our div node, and use remove() method to remove the node.

EDIT:

Added css.

Do not use a if your anchors only needs to delete your segments. For example use only i without wrapping a and add a cursor: pointer style to it.

See working example:

 function createUserSegment(tags){ var div = document.createElement("div"); div.className = 'contact-segment-item includes'; var tagInfo = document.createElement("div"); tagInfo.className = 'contact-segment-item__text'; tagInfo.innerHTML = tags; var closeButton = document.createElement("i"); closeButton.className = 'contact-segment-item__closeButton white-segment-icon fa fa-times'; closeButton.onclick = function() { div.remove(); }; div.appendChild(tagInfo); div.appendChild(closeButton); document.getElementById("contact-segments").appendChild(div); } 

 #contact-segments { max-width:350px; width: 100%; } .contact-segment-item { display: block; position: relative; width: 100%; background: #00B792; border-radius: 8px; line-height: 40px; clear: both; padding: 20px 30px; margin-bottom: 10px; } .contact-segment-item__anchor::after { clear: both; } .contact-segment-item__text { display: inline-block; color: #fff; } .contact-segment-item__closeButton { display: inline-block; cursor: pointer; color: #fff; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <button id="add-new" onClick="createUserSegment('new one')">Add new segment</button> <br/> <div id="contact-segments"> </div>