入れ子になった配列オブジェクトを削除するには？</p> <p>「の値を」：「10

Question

how to Delete red Mark item

私は私のJavaScriptコード を追加...私は、ネストされた配列オブジェクトのいずれかがnestobjを削除する方法を私に

を助けることができる機能を削除して生成されません。 「

"値"： "20"

"値"： "20"

<script> 
$(function() { 
    var tr; 
    var obj = [{ obj1: { "name": "v1", nestobj: [{ "value": "10" }, { "value": "20" }, { "value": "20" }] } }]; 

    obj.push({ obj1: { "name": "v2", nestobj: [{ "value": "abc" }, {"value": "xyz"}] } }); 


    for (var i = 0; i < obj.length; i++) 
    { 
     tr = $('<tr/>'); 
     tr.append("<td>" + obj[i].obj1.name + "</td>") 
     $('tbody').append(tr); 


     for (var j = 0; j < obj[i].obj1.nestobj.length; j++) 
     {     
      tr.append("<p>" + obj[i].obj1.nestobj[j].value + " <input type='submit' value='Delete' onclick='&quot;);'> </p>") 
      $('tbody').append(tr); 

     }  
     tr.append("<td>" + obj[i].obj1.nestobj.length + " <input type='submit' value='Remove All' onclick='&quot;);'> </td>") 
     $('tbody').append(tr); 

    } 
}); 

Answer 1

は、次のようにあなたの関数を変更し

：

$(function() { 
var tr; 
var obj = [{ obj1: { "name": "v1", nestobj: [{ "value": "10" }, { "value": "20" }, { "value": "20" }] } }]; 

obj.push({ obj1: { "name": "v2", nestobj: [{ "value": "abc" }, {"value": "xyz"}] } }); 


for (var i = 0; i < obj.length; i++) 
{ 
    tr = $('<tr/>'); 
    tr.append("<td>" + obj[i].obj1.name + "</td>") 
    $('tbody').append(tr); 


    for (var j = 0; j < obj[i].obj1.nestobj.length; j++) 
    {     
     var $delBtn = $("<input>",{type:"submit",value:"Delete"}); 
     var $p = $("<p>",{text:obj[i].obj1.nestobj[j].value}); 
     $delBtn.on("click",function(){ 
      $(this).parent().remove(); 
     }); 
     $p.append($delBtn); 
     tr.append($p); 
     $('tbody').append(tr); 

    }  
    var $removeAll = $("<input>",{type:"submit",value:"Remove All"}); 
    var $col = $("<td>",{text: obj[i].obj1.nestobj.length}); 
    $removeAll.on("click",function(){ 
     $(this).closest("tr").find("p").remove(); 
    }); 
    $col.append($removeAll); 
    tr.append($col); 
    $('tbody').append(tr); 

} 

}）;

それは、すべての入力にイベントを追加する方法についての項目

$(function() { 
 
    var tr; 
 
    var obj = [{ obj1: { "name": "v1", nestobj: [{ "value": "10" }, { "value": "20" }, { "value": "20" }] } }]; 
 

 
    obj.push({ obj1: { "name": "v2", nestobj: [{ "value": "abc" }, {"value": "xyz"}] } }); 
 

 

 
    for (var i = 0; i < obj.length; i++) 
 
    { 
 
     tr = $('<tr/>'); 
 
     tr.append("<td>" + obj[i].obj1.name + "</td>") 
 
     $('tbody').append(tr); 
 

 

 
     for (var j = 0; j < obj[i].obj1.nestobj.length; j++) 
 
     {     
 
      var $delBtn = $("<input>",{type:"submit",value:"Delete"}); 
 
      var $p = $("<p>",{text:obj[i].obj1.nestobj[j].value}); 
 
      $delBtn.on("click",function(){ 
 
       $(this).parent().remove(); 
 
      }); 
 
      $p.append($delBtn); 
 
      tr.append($p); 
 
      $('tbody').append(tr); 
 

 
     }  
 
     var $removeAll = $("<input>",{type:"submit",value:"Remove All"}); 
 
     var $col = $("<td>",{text: obj[i].obj1.nestobj.length}); 
 
     $removeAll.on("click",function(){ 
 
      $(this).closest("tr").find("p").remove(); 
 
     }); 
 
     $col.append($removeAll); 
 
     tr.append($col); 
 
     $('tbody').append(tr); 
 

 
    } 
 
});

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