Question

点击<div class="form-group">时，我想删除整个<span type="button">。

<div class="form-group">
    <label class="col-md-4 control-label"></label>
    <div class="col-md-5">
        <div class="input-group">
            <input required="" placeholder="Voeg een highlight toe" class="form-control" name="highlight[]" type="text">
            <div class="input-group-btn">
                <span onclick="removeRow(this)" class="btn btn-default" type="button">
                    Verwijder
                </span>                 
            </div>
        </div>
    </div>
</div>

必须如下所示：

<script>
    function removeRow(element){
        element.parentNode.remove();
    }
</script>

Answer 1

这样的事情

<div class="form-group" id="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-5">
    <div class="input-group">
        <input required="" placeholder="Voeg een highlight toe" class="form-control" name="highlight[]" type="text">
        <div class="input-group-btn">
            <span class="btn btn-default" id="clickme" type="button">
                Verwijder
            </span>                 
        </div>
    </div>
</div>
</div>

然后是js

var cm = document.getElementById('clickme');
cm.addEventListener('click',function(){
  console.log('clicked');
  var fg = document.getElementById('form-group');
  fg.parentElement.removeChild(fg);
});

看小提琴

http://jsfiddle.net/X8Cwq/

Answer 2

只需将树遍历到该节点并将其删除即可。

function removeRow(element){
    element.parentNode.parentNode.parentNode.parentNode.remove();
}

DEMO

JavaScript删除上部元素

2 个答案: