.removeChild()不工作

Question

我已经创建了一个可以添加的表单字段，但是我无法删除它。不知道为什么它不工作，我想我可能是通过了错误的参数？我尝试过许多变体。

<h3 class="color-text">What key fatures are you looking for?</h3>
<p class="contact-message">
    <textarea id="client-needs" placeholder="What key features are you looking to have within your website? ie. storefront, social media intigrtion, a blogging platform, content managment system, ect." name="client-needs" rows="5" cols="10"></textarea>
</p>


<script type="text/javascript">
var i = 1;
function addUrl(){
    if (i<3) {
        i++;
        var p = document.createElement('p');
        p.innerHTML = '<hr><textarea id="client-needs" placeholder="Add URL #'+i+'" name="client-needs'+i+'" rows="1" cols="10"></textarea><input type="button" value="Remove added URL" onclick="removeUrl(this)">';
        document.getElementById('examples').appendChild(p);

}
}

function removeUrl(textarea){
    document.getElementById('client-needs').removeChild(textarea.parentNode);
    i--;
}
</script>

<h3 class="color-text">Do you have and examples of what you want?</h3>
<p class="contact-message" id="examples">
    <textarea id="examples" placeholder="Do you know of any website like the one you want? ie. google.com, p5services.com, youtube.com" name="examples" rows="1" cols="10"></textarea>
</p>

<br>

<input type="button" value="Add url example" onclick="addUrl()">

Answer 1

使用removeChild是不正确的。要删除添加了内容的副翼，您应该这样做：

function removeUrl(textarea) {
    textarea.parentNode.parentNode.removeChild(textarea.parentNode);
    i--;
}

textarea.parentNode是一个要删除的p元素，不管它是什么，textarea.parentNode.parentNode都是这个段落的父元素。应该对父级调用removeChild，并且它需要父级的一个子级来删除。

演示：http://jsfiddle.net/7caysjw8/

Answer 2

id是每个元素的唯一值，每个元素都有相同的名称ID。

var i = 1;
function addUrl(){
if (i<3) {
    i++;
    var p = document.createElement('p');
    p.innerHTML = '<hr><textarea id="client-needs'+i+'" placeholder="Add URL #'+i+'" name="client-needs'+i+'" rows="1" cols="10"></textarea><input type="button" value="Remove added URL" onclick="removeUrl('+i+')">';
    document.getElementById('examples').appendChild(p);

}
}

function removeUrl(id){
document.getElementById("client-needs"+id).remove();
i--;
}