add remove question

wax-prosemirror-core/src/components/icons/icons.js

@@ -458,6 +458,13 @@ export default {
       <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />{' '}
     </Svg>
   ),
+  deleteOutlinedQuestion: ({ className }) => (
+    <Svg className={className} fill="none" viewBox="0 0 24 24">
+      <title> Delete Question </title>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />{' '}
+    </Svg>
+  ),
   essay: ({ className }) => (
     <Svg className={className} fill="none" viewBox="0 0 24 24">
       <title> Create Essay </title>

wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js

@@ -119,7 +119,7 @@ export default ({ node, view, getPos }) => {
               onClick={removeQuestion}
               type="button"
             >
-              <StyledIconActionRemove name="deleteOutlined" />
+              <StyledIconActionRemove name="deleteOutlinedQuestion" />
             </ActionButton>
           </FillTheGapContainerTool>
         )}

wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js

 import React, { useContext } from 'react';
-import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
+import { WaxContext, ComponentPlugin, Icon } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import ContainerEditor from './ContainerEditor';
 import FeedbackComponent from '../../MultipleChoiceQuestionService/components/FeedbackComponent';
@@ -24,6 +24,22 @@ const MultipleDropDownpContainer = styled.div`
   margin-bottom: 30px;
 `;
 
+const ActionButton = styled.button`
+  background: transparent;
+  cursor: pointer;
+  margin-top: 16px;
+  border: none;
+  position: relative;
+  bottom: 14px;
+  left: -11px;
+  float: right;
+`;
+
+const StyledIconActionRemove = styled(Icon)`
+  height: 24px;
+  width: 24px;
+`;
+
 export default ({ node, view, getPos }) => {
   const context = useContext(WaxContext);
   const {
@@ -42,6 +58,8 @@ export default ({ node, view, getPos }) => {
   const { testMode } = customProps;
   const { feedback } = node.attrs;
 
+  const removeQuestion = () => {};
+
   return (
     <MultipleDropDownpWrapper>
       <div>
@@ -49,6 +67,13 @@ export default ({ node, view, getPos }) => {
         {!testMode && !readOnly && (
           <MultipleDropDownContainerTool>
             <MultipleDropDown />
+            <ActionButton
+              aria-label="delete this question"
+              onClick={removeQuestion}
+              type="button"
+            >
+              <StyledIconActionRemove name="deleteOutlinedQuestion" />
+            </ActionButton>
           </MultipleDropDownContainerTool>
         )}
       </div>