ジャバスクリプト内のボタンが

Question

を押したときに、私はこのようになりますdivを持っているのdivから要素を削除します。

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

あなたが見ることができるように、JavaScriptを介して追加取得しているdiv要素は、「X」とのボタンを示しaタグを持っています。

contact-segment-itemを「x」キーを押して削除するにはどうすればよいですか？

それぞれがどのように見えるので、写真を撮るのが簡単です。

「x」ボタンをクリックするとjavascriptをリンクできますが、削除するのはcontact-segmentsの子供とどのようにして削除するのですか？pを削除するにはどうすればよいですか？ユーザーはこのdivの「X」を押すと

は、私がpを取得したいか、その場合Woop!にはので、私はそれで何かを行うことができますが、その後も削除するには、そのcontact-segment-item

おかげ

Answer 1

.innerHTMLの代わりに、ノードをappendChild.にネストします。最後に、iボタンを閉じるには、onClickイベントハンドラを追加します。ノードdivを渡し、remove()メソッドを使用してノードを削除します。

EDIT：

を追加しましたCSS。

アンカーでセグメントを削除する必要がある場合はaを使用しないでください。たとえば、aをラップせずにiのみを使用し、cursor: pointerスタイルを追加します。

実施例を参照してください：//開発者：

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>