diff --git a/assets/css/src/components-plugin/_segments.scss b/assets/css/src/components-plugin/_segments.scss
index 3c75025ded..1687242cf8 100644
--- a/assets/css/src/components-plugin/_segments.scss
+++ b/assets/css/src/components-plugin/_segments.scss
@@ -4,6 +4,39 @@
grid-column: span 2;
}
+.mailpoet-segments-segments-section .mailpoet-grid-three-columns {
+ padding-right: 40px;
+ position: relative;
+}
+
.mailpoet-segments-description-section .mailpoet-form-textarea textarea {
height: 100px;
}
+
+.mailpoet-segments-segments-section .mailpoet-form-segment-delete {
+ align-items: center;
+ border: 1px solid #f00;
+ border-radius: 12px;
+ color: #f00;
+ cursor: pointer;
+ display: flex;
+ height: 20px;
+ justify-content: center;
+ margin-top: -11px;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ width: 20px;
+}
+
+.mailpoet-segments-segments-section .mailpoet-form-segment-delete svg {
+ fill: currentColor;
+ height: 12px;
+ width: 12px;
+}
+
+.mailpoet-segments-segments-section .mailpoet-form-segment-delete:hover,
+.mailpoet-segments-segments-section .mailpoet-form-segment-delete:focus {
+ background: #f00;
+ color: #fff;
+}
diff --git a/assets/js/src/common/button/icon/minus.tsx b/assets/js/src/common/button/icon/minus.tsx
new file mode 100644
index 0000000000..2cbb7b4292
--- /dev/null
+++ b/assets/js/src/common/button/icon/minus.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const MinusIcon = (
+
+);
+
+export { MinusIcon };
diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx
index 5f962a0549..3f0c354edf 100644
--- a/assets/js/src/segments/dynamic/form.tsx
+++ b/assets/js/src/segments/dynamic/form.tsx
@@ -13,6 +13,7 @@ import { FilterSeparator } from './filter_separator';
import { SubscribersCounter } from './subscribers_counter';
import { FormFilterFields } from './form_filter_fields';
import { isFormValid } from './validator';
+import { MinusIcon } from '../../common/button/icon/minus';
import plusIcon from '../../common/button/icon/plus';
import {
@@ -101,6 +102,22 @@ export const Form: React.FunctionComponent = ({
{Array.isArray(filterRows) && filterRows.map((filterRow, index) => (
<>
+ {filterRows.length > 1 && (
+ {
+ e.preventDefault();
+ const filters = segment.filters;
+ filters.splice(index, 1);
+ updateSegment({
+ filters,
+ });
+ }}
+ >
+ {MinusIcon}
+
+ )}