フォーム内でアイテムを追加/削除するためのパターン
私は周りを見回しましたが、フォーム内のアイテムをインラインで追加/削除する簡単な方法の既存の例/パターンを見つけることができません。
このシナリオは、新しい顧客をアカウントに追加するプロセス中です。任意の数の製品を追加または削除して、それらの製品の一部のオプションを変更できます。
スクリーンショット：
その機能を備えたUIパターンや実例を知っていますか？
私には、このフォームには明らかに混乱する部分がありますが、解決策を検討する前に、既存のベストプラクティスがあるかどうかを知りたいと思います。上記のフォームに関するその他の一般的な考えも歓迎します。
ありがとう！
現在のフォームには、考慮したいことがいくつかあります。
フォームの読み込み時に各製品に表示モードを使用します。ユーザーが初めてフォームを表示したとき、すべての製品が編集モードになっているようです。特に繰り返しの場合、入力要素が多すぎると、脳の過負荷が多くなります。最初の読み込み時にすべてを表示モードで置くことを検討してください-入力UI要素はなく、ユーザーが各レコードを一意に識別するために必要な最小限の情報だけです。表示モードでは、ボタンまたは表示へのリンク（詳細）、編集、および削除。これらの3つのボタンを右端の列のデータから明確に離して配置し、この列を右揃えにします。
Add New Product Button。このようなほとんどのフォームは、リストの最後に新しい製品を追加します。これがあなたの意図だと思います。リストから明確に離れた場所に[Add New Product]ボタンを作成する必要があります。リストの下に右揃えで配置することをお勧めします。リストの上に「新規追加」ボタンを左揃えにしたい人もいます。これも問題ありませんが、この配置を選択する場合は、フォームの下部まで自動的にスクロールして、ユーザーに新しい製品の追加UIを表示するようにしてください。
追加/編集モード。これには、すべての入力要素が含まれます。このサブフォームを目立たせるには、常に最大1つのアイテムのみが編集モードになるようにします。また、編集に注意を引くために背景色を暗くすることもできます。
追加/編集モードでは、[キャンセル]と[保存]の2つのボタンがあり、理想的には追加/編集「サブフォーム」の右下に配置され、右揃えになります。 「保存」の代わりに、新しい製品の場合は「作成」、既存の製品を編集している場合は「更新」という単語を使用できます。
編集モードを終了するために、ユーザーが[作成/更新]または[キャンセル]をクリックする必要はありません。別のレコードの[編集]ボタンをクリックすると、現在の編集ビューが自動的にキャンセルされ、その他の製品が編集ビューに表示されます。
削除します。前述のように、削除は製品の表示モードのコマンド列で行う必要があります。削除するときは、常にユーザーに確認を求めます。
場合によっては、各項目に管理用の「スイッチ」または状態があり、編集モードに入る必要なく設定したい場合があります。ほとんどの場合、これは真偽の取引です。このオン/オフの状態を表すチェックボックスの代わりに、状態を切り替えるクリック可能な単語またはアイコンを使用します。ワンクリックで新しい状態がデータストアに自動的に保存され、正常に保存されたらアイコン/ Wordが変更されます。これらのトグルについては、ホバー状態にして、クリック可能であることをユーザーに知らせます。
各アイテムの表示モードに含めることができるいくつかの一般的なスイッチがあります。理想的には、これらのスイッチを中央の列にする必要があります。
Ready vs. Not Ready。場合によっては、ユーザーに製品を表示したいが変更を保存したいかどうかわからないことがあります。何かを保存しても、プレゼンテーションの準備ができているとは限りません。
Public vs. Private。これは、ビジターまたはレギュラーユーザーがデータが準備完了状態の場合にデータを表示できるかどうかに関係しています。プライベートとは、作成者が準備ができているとマークしている限り、社内の特権ユーザーが製品を見ることができることを意味します。
インタラクションを有効/無効にします。インタラクションは、コメント、評価などのユーザーのアクションになります。これらのそれぞれについて、ユーザーはあなたの製品にそれを行うことができます。
これは古いスレッドですが、このトピックについてデザイナーと同様の会話をしています。彼女は https://bsaefiling1.fincen.treas.gov/lc/content/xfaforms/profiles/htmldefault.html でIRSが使用するデザインを採用することを提案しています。
画像を見る： 
[+]ボタンと[-]ボタンのスコープが同じであることを示唆しているため、IRSソリューションは扱いにくいと感じます。 [-]ボタンを使用すると、以下のセクションを削除できますが、複数（この例では2つ）の[+]ボタンはまったく同じことを行います。リストの最後に1つのセクションを追加します。スレッドの一番上の解決策が私が提案しているものです。誰かがこれらのアプローチのいずれか、またはおそらく第三の方法について何か考えを持っていますか？
その価値について...私はちょうど同じようなもので遊んだ... 
...緑色の線は、その上にあるものをクリックするまで、その下にあるものが表示されないことを意味します。
上記の組み合わせを推奨します。
最初の例を使用して、レコードを追加します。
グリッドを使用して、レコードのリストを表示します。行を選択すると、ユーザーは編集または削除/削除を選択できます。上記のフォームは、レコードが保存されてグリッドから選択されると、編集フォームとしても機能します。
ベストプラクティスはなく、慣習と良い目だけがあります。
新しい「製品」の領域をグレーアウトすると、ボタンをクリックしたときに何が起こるかが明確になります。また、各セクションの「右上」は常に「製品の追加または削除」を意味するという2番目の利点があり、アニメーションを投入してその概念を強化することもできます。
オリジナルのデザインはもういいスタートを切っていると思います。ただし、アクションボタンのセクションと位置はユーザーを混乱させます。
これが私の提案です：
キャンペーンに製品を追加していることをユーザーに明確に示すために、キャンペーンには製品セクションを含める必要があります。元のデザインでは、すべてが同じレベルにあり、孤立したフォームセクションとして解釈できました。
ユーザーが[商品を追加]ボタンをクリックしてアクションを開始するまで、商品を追加するための入力フィールドを表示しないでください。そうしないと、ユーザーはそれらのフィールドに到達する前にそれらのフィールドが何であるかについて混乱します。
ユーザーが商品をキャンペーンに追加したら、キャンペーンと同じレベルの最上部にある[キャンペーンの保存]をクリックするだけでよいので、ユーザーは保存するときに、追加した商品と共にキャンペーンを保存します。
この段階的なプロセスにより、ユーザーにわかりやすくwhen彼らはキャンペーンのデータを入力しており、when製品のデータを入力しています。