そのIDに基づいてdivを選択的に削除する関数を作成する方法

-1

私のプログラムでは、新たに作成されたdivをページに追加し、これらの新しいdivをMydivIDis1、MydivIDis2、MydivIDis3に。これらの新しく作成されたdivにはそれぞれ「削除」ボタンがあります。削除ボタンは現在あるdivを削除しますが、これを行う方法はわかりません。そのIDに基づいてdivを選択的に削除する関数を作成する方法

以下のコードでは、javascriptを使用して各div内に「要素を削除」ボタンを作成しようとしました。このボタンは、removeというonclick関数に関連付けられています。私は引数newDiv.idを取るためにbutton.onclickにも指定しています。しかし、このコードは動作しません。

<!DOCTYPE html> 
<html> 
<body> 
<div id="MainContainer"> 
    <input type="button" value="Add Element" id="add" onClick="add();"> 
    <div id="InnerContainer"> 
    </div> 
</div> 
<script> 
var mainDiv=document.getElementById("MainContainer"); 
var innerDiv=document.getElementById("InnerContainer"); 
var clicks=0 

var add=function(){ 
    clicks += 1; 

    var newDiv=document.createElement("div"); 
    newDiv.id="MydivIDis"+clicks; 
    newDiv.innerHTML=newDiv.id 

    mainDiv.appendChild(newDiv); //creates the new Div, with the id MydivIDis1, MydivIDis2, MydivIDis3 

    var button=document.createElement("button"); 
    var t=document.createTextNode("Remove Element"); 
    button.onclick=function(){ 
     remove(newDiv.id); //Here i am trying to specify to the program to take newDiv.id as the input to the remove function. 
    }; 

    button.appendChild(t); //creates new button and appends to each new Div 

    var remove=function(input){ 
     mainDiv.removeChild(input); 
    } 

    mainDiv.appendChild(button); 
}; 
</script> 
</body> 
</html>

出典

2016-09-07 Yoong Tat

['removeChild']（https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild）は、IDではなく引数としてノードを取っているようです。ですから、解決策は 'remove（newDiv.id）'を 'remove（newDiv）'に変更することだけかもしれません。 – Sevanteri

右。私は答えとして投稿します。 – Sevanteri

-2

なぜjQueryを使用しないのですか？これは素晴らしいライブラリです。変更したいdivタグにIDを与えて削除するだけです。私はあなたにそれを使用する例を挙げます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
    $("button").click(function(){ 
 
     $("#div1").remove(); 
 
    }

removeChild

出典

2016-09-07 08:06:45 puneeth8994

こんにちは、申し訳ありません。私はjavascriptのコースを取っていて、この言語に完全に慣れたいと思っています.JQueryをまだ使用していないのはなぜですか。 –

代わり素子IDの引数としてノードを取ります。

解決策は、newDivをremove関数に与えることです。

button.onclick=function(){ 
    remove(newDiv); 
};

出典

2016-09-07 08:28:51 Sevanteri

あなたの削除文は間違っている、あなたはそれを削除したい場合は、あなたの現在の設計どおりにもdiv削除ボタンを削除した後、まだ、あるでしょう、また、この

mainDiv.removeChild(document.getElementById(input));

のような要素を削除しますボタンもこの行にこの

で

mainDiv.appendChild(button);

を交換する必要が

newDiv.appendChild(button);

出典

2016-09-07 08:50:02

こんにちは、ご意見ありがとうございます。あなたのメソッドとsevanteriのメソッドの両方が機能します。 –

クール！それは正しい答えをマークしてくださいあなたのために働いた感じ！ :) –

そのIDに基づいてdivを選択的に削除する関数を作成する方法

答えて

関連する問題