内部に複数の要素を持つ要素があります。内部の要素はすべて同じ名前です。関数でそれらをすべて削除する方法はありますか?
(たとえば、この質問を参照してください。親から複数の子を削除しますか?
内部に複数の要素を持つ要素があります。内部の要素はすべて同じ名前です。関数でそれらをすべて削除する方法はありますか?
(たとえば、この質問を参照してください。親から複数の子を削除しますか?
これは、指定されたIDを持つ親の指定された名前を持つ第1レベルの子を削除するソリューションです。さらに深く知りたい場合は、内部にある子要素で再帰的に呼び出すことができます(parent
パラメーターも追加する必要があります)。
function removeChildren (params){
var parentId = params.parentId;
var childName = params.childName;
var childNodes = document.getElementById(parentId).childNodes;
for(var i=childNodes.length-1;i >= 0;i--){
var childNode = childNodes[i];
if(childNode.name == 'foo'){
childNode.parentNode.removeChild(childNode);
}
}
}
そしてそれを呼ぶために:
removeChildren({parentId:'div1',childName:'foo'});
そしてテストのためのフィドル:
注:JavaScriptで信頼できる名前要素にアクセスできるのは、要素でサポートされている場合のみです(たとえば、DIVではサポートされていません!)。理由については、こちらをご覧ください。
アップデート:
会話に基づいたclassNameを使用したソリューションは次のとおりです。
function removeChildren (params){
var parentId = params.parentId;
var childName = params.childName;
var childNodesToRemove = document.getElementById(parentId).getElementsByClassName('foo');
for(var i=childNodesToRemove.length-1;i >= 0;i--){
var childNode = childNodesToRemove[i];
childNode.parentNode.removeChild(childNode);
}
}
これは簡単なはずです。最初に親要素を取得します。
var theParent = document.getElementById("notSoHappyFather");
次に、削除するノードの配列を取得します。
var theChildren = theParent.getElementsByName("unluckyChild");
最後に、ループでそれらを削除します。
for (var i = 0; i < theChildren.length; i++)
{
theParent.removeChild(theChildren[i]);
}
HTML のサンプルからより完全な答えが得られますが、DOM 関数を呼び出して子のリストを取得し、それらを削除するのはかなり簡単です。jQuery では、すべての子を削除すると次のようになります。
$("#target > *").remove();
また
$("#target").html("");
そして、ここでデモを見ることができます: http://jsfiddle.net/jfriend00/ZBYCh/
または、jQuery を使用せずに次のこともできます。
document.getElementById("target").innerHTML = "";
子のサブセットのみを削除しようとしている (そして他の子をそのままにしておく) 場合は、残す子と削除する子を決定する方法をより具体的にする必要があります。jQuery では、.find() select または filter() セレクターを使用して、子のリストを削除対象の子だけに絞り込むことができます。